如何配合后端接口，使用wangEditor V5 上传图片——自定义上传？

[LCG669]

问题描述

使用wangEditor V5 上传图片——自定义上传 总是提示：Error: Cannot get upload server address 没有配置上传地址

配套环境 Vue3 + TypeScript + Axios 目前已实现：

1. wangEditor V5的文字的增删改查（证明接口正常）
2. element plus库的Upload组件的图片的增删改查（证明接口正常）

wangEditor 版本

"@wangeditor/editor": "^0.14.2" "@wangeditor/editor-for-vue": "^5.1.8-7"

是否查阅了文档 ？

浏览了官方文档，链接：https://www.wangeditor.com/v5/guide/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%8A%E4%BC%A0

（文档链接 doc.wangEditor.com ）

是

最小成本的复现步骤

（请告诉我们，如何最快的复现该问题？）

• 步骤一 后台接口使用springboot实现，接受单个MultipartFile文件类型参数
• 步骤二 根据后台接口文档，前端对应的接口封装文件

  
  // upLoad 文件上传 位于 @/network/upLoad

import http from '@/network/http' // http文件是全局的接口封装文件，仅负责配置baseURL地址和挂载token到请求头

export default (data: FormData) => { return http({ url: '/sys/common/localUpload', method: 'post', data, headers: { "Content-Type": "multipart/form-data;", } }) }

- 步骤三
**使用官网示范，[使用Vue3的写法：https://juejin.cn/post/7027977252331585544](https://juejin.cn/post/7027977252331585544)**
这是我编写的.vue文件运行代码：

[itshizhan]

自定义上传不需要配置server。 你的upLoad(formData) 是什么？ 你应该在upLoad 直接上传就可以了。

[LCG669]

自定义上传不需要配置服务器。 你upLoad(formData)是什么？ 你应该在上传直接上传就可以了。

upLoad(formData)就是步骤二的上传方法

[LCG669]

自定义上传不需要配置服务器。你upLoad(formData)是什么？你应该在直接上传就可以了。

upLoad(formData)就是步骤二的上传方法

删除或不删除server，都会提示Error: Cannot get upload server address 没有配置上传地址

[itshizhan]

自定义上传，直接配置customUpload就可以了。

editorConfig.MENU_CONF['uploadImage'] = {
    // 自定义上传
    async customUpload(file: File, insertFn: InsertFnType) {
        console.log(file)
        // 客户端可以判断文件大小、文件类型
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        insertFn(url, alt, href)
    }
}

你这个错误，应该是客户端报的错误吧。

[LCG669]

自定义上传，直接配置自定义上传就可以了。

editorConfig.MENU_CONF['uploadImage'] = {
    // 自定义上传
    async customUpload(file: File, insertFn: InsertFnType) {
        console.log(file)
        // 客户端可以判断文件大小、文件类型
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        insertFn(url, alt, href)
    }
}

你这个错误，应该是客户端报的错误吧。

其他配置不变，仅修改customUpload，customUpload除了console.log(file)以外 全部删除 ，控制台也无法打印消息，仍然报这个错误。 错误完整代码：

{
  message:"Cannot get upload server address
  没有配置上传地址"
  stack:"Error: Cannot get upload server address
  没有配置上传地址
      at Object.t.createUploader (webpack-internal:///./node_modules/@wangeditor/editor/dist/index.esm.js:57:141181)
      at eval (webpack-internal:///./node_modules/@wangeditor/editor/dist/index.esm.js:128:20935)
      at eval (webpack-internal:///./node_modules/@wangeditor/editor/dist/index.esm.js:128:21628)
      at eval (webpack-internal:///./node_modules/@wangeditor/editor/dist/index.esm.js:128:1458)
      at Object.eval [as next] (webpack-internal:///./node_modules/@wangeditor/editor/dist/index.esm.js:128:1563)
      at eval (webpack-internal:///./node_modules/@wangeditor/editor/dist/index.esm.js:128:499)
      at new Promise (<anonymous>)
      at yr (webpack-internal:///./node_modules/@wangeditor/editor/dist/index.esm.js:128:244)
      at du (webpack-internal:///./node_modules/@wangeditor/editor/dist/index.esm.js:128:20687)
      at eval (webpack-internal:///./node_modules/@wangeditor/editor/dist/index.esm.js:128:22316)"
}

[itshizhan]

你可以提供的可复现的demo看看 我本地刚测试，没有发现你说的错误

[wangfupeng1988]

要解决这个问题，你要先抛开 Vue 的环境，就用最简单的 html demo 去复现问题，不要掺杂任何无关代码。

如复现了，可以把 html 代码提交到这里。

[wangfupeng1988]

另外，经过测试，配置了 customUpload 之后，就不要再配置 server 和 fieldName 了。