react uploadAttachment: { // 自定义上传附件 async customUpload(file: File, insertFn: any) { try { const formData = new FormData(); formData.append('file', file); fetchApi(uploadImgFile, { param: formData, onRequestSuccessfull: (ret: any) => { const url = fileSever + ret?.result?.name; const name = ` <img src="https://devslecapi.twilas.com/v1/common/file/download/img/2023/06/06/f58cd77b0781b9270cb9998120f9d3ce1.jpeg" alt="1.jpeg" /> ${ret?.result?.originalName}`; insertFn(name, url); }, }); } catch (error) { console.log(error); } }, }, 附件上传成功后插入时添加一个图片在附件名称前 const url = fileSever + ret?.result?.name; const name = ` <img src="https://devslecapi.twilas.com/v1/common/file/download/img/2023/06/06/f58cd77b0781b9270cb9998120f9d3ce1.jpeg" alt="1.jpeg" /> ${ret?.result?.originalName}`; insertFn(name, url);插入到富文本后显示代码，没有显示正确的图片

看起来您正在使用富文本编辑器，但是插入的图片没有正确显示。这可能是因为您插入的图片路径不正确或者您没有正确设置图片的大小。您可以尝试以下方法：

1. 检查图片路径是否正确，尝试使用绝对路径或相对路径。
2. 确保您的图片可以在浏览器中正确显示，尝试在浏览器中打开图片链接。
3. 设置图片的大小，可以使用CSS属性width和height来设置图片大小。

希望以上方法可以帮助您解决问题。如果还有其他问题，请随时向我提问。

相关问题

react + ts 中 // 编辑器配置 const editorConfig: Partial<IEditorConfig> = { // 在编辑器中，点击选中“附件”节点时，要弹出的菜单 hoverbarKeys: { attachment: { menuKeys: ['downloadAttachment'], // “下载附件”菜单 }, }, MENU_CONF: { // 自定义上传图片 uploadImage: { async customUpload(file: File, insertFn: any) { try { const formData = new FormData(); formData.append('file', file); fetchApi(uploadImgFile, { param: formData, onRequestSuccessfull: (ret: any) => { const url = fileSever + ret?.result?.name; const alt = ret?.result?.originalName; const href = fileSever + ret?.result?.name; insertFn(url, alt || '', href || ''); }, }); } catch (error) { console.log(error); } }, }, // 自定义上传视屏 uploadVideo: { async customUpload(file: File, insertFn: any) { try { const formData = new FormData(); formData.append('file', file); fetchApi(uploadImgFile, { param: formData, onRequestSuccessfull: (ret: any) => { const url = fileSever + ret?.result?.name; const alt = ret?.result?.originalName; const href = fileSever + ret?.result?.name; insertFn(url, alt || '', href || ''); }, }); } catch (error) { console.log(error); } }, }, uploadAttachment: { // 自定义上传附件 async customUpload(file: File, insertFn: any) { try { const formData = new FormData(); formData.append('file', file); fetchApi(uploadImgFile, { param: formData, onRequestSuccessfull: (ret: any) => { const url = fileSever + ret?.result?.name; const name = ret?.result?.originalName; insertFn(url, name); }, }); } catch (error) { console.log(error); } }, }, }, };配置了自定义上传附件，但是在上传附件时没有执行自定义上传附件的服务，控制台报错‘Uncaught (in promise) Error: Cannot get upload server address 没有配置上传地址’

根据你提供的信息，错误信息显示没有配置上传地址。你需要检查一下 fetchApi 函数调用的 uploadImgFile 参数是否配置正确。此外，你也可以检查一下后端服务是否可以正常访问。如果这些都没有问题，你可以尝试在自定义上传附件的回调函数 onRequestSuccessfull 中打印一下 ret 参数，看看是否正确返回了上传附件的信息。

在react中通过File-Saver插件保存文件时需要在浏览器中显示下载进度

在React中利用File-Saver插件（如`js-file-saving`）保存文件并显示下载进度，通常需要结合使用一些额外的技术和库，比如`xhr2`来处理异步上传，并监听`progress`事件来更新进度。以下是实现步骤：

1. 首先，在项目中安装必要的依赖：

   npm install js-file-saving axios

2. 引入所需的模块：

   import saveAs from 'js-file-saving';
   const axios = require('axios');

3. 创建一个函数来处理文件上传和进度更新：

   const downloadWithProgress = async (file, fileName) => {
     const formData = new FormData();
     formData.append('file', file);

     try {
       const response = await axios.post('/api/upload', formData, {
         onUploadProgress: (event) => {
           if (event.lengthComputable) {
             const percentComplete = Math.round((event.loaded / event.total) * 100);
             console.log(`Download progress: ${percentComplete}%`);
           }
         },
       });

       // 获取服务器返回的下载链接或文件数据
       const downloadUrl = response.data.downloadUrl;

       // 使用File-Saver下载文件
       saveAs(downloadUrl, fileName);
     } catch (error) {
       console.error('Error saving file:', error);
     }
   };

4. 调用这个函数，传入用户选择的文件和文件名：

   const handleFileSelect = (e) => {
     const file = e.target.files[0];
     downloadWithProgress(file, file.name);
   };

   // 在组件的适当位置添加文件输入元素和事件监听
   <input type="file" onChange={handleFileSelect} />

5.