芋道上传图片报错防火墙问题，使用自定义上传

原创已于 2023-12-17 14:11:22 修改 · 889 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2023-12-17 14:10:18 首次发布

该代码片段展示了如何在IT内容管理系统中实现自定义图片上传功能，通过`customUpload`函数，用户可以上传文件，然后利用`insertFn`将图片URL插入到编辑器。它使用了FormData对象和ElementPlus的Upload组件进行上传操作，并捕获可能的错误。

  customInsert(res: any, insertFn: InsertFnType) {
            console.log(res)
            insertFn(res.data, 'image', res.data)
          },
          customUpload(files, insertImgFn) {
            // 创建FormData对象
            const formData = new FormData()
            formData.append('file', files)
            // 将文件添加到FormData中
            // 发送上传请求
            // 这里使用Element Plus的Upload组件来实现上传
            // 请根据实际情况调整上传接口地址和其他参数
            request
              .upload({ url: import.meta.env.VITE_UPLOAD_URL, data: formData })
              .then((response) => {
                // 上传成功后，获取图片的 URL
                const imgUrl = response.data
                // 调用 insertImgCallback 插入图片到编辑器中
                insertImgFn(imgUrl, insertImgFn)
              })
              .catch((error) => {
                // 上传失败的处理逻辑
                console.error('上传失败:', error)
              })
          }