wangEditor(4x) 上传图片功能及自定义上传图片功能

项目场景：

例如：上传接口前缀不固定，总不能每次更新都得手动改一次吧， 这时我们该如何解决呢？

---

解决方案：

该方法只针对不固定上传接口

 // 自定义上传图片
this.editor.config.customUploadImg = function(resultFiles, insertImgFn) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后，插入到编辑器的方法
resultFiles.forEach((item, i) => {
   const formData = new FormData()
    formData .append('file', item)
        _that.$store
          .dispatch('这里写你的请求接口', formData )
            .then((res) => {
              // 上传图片，返回结果，将图片插入到编辑器中
            insertImgFn(res.url)
            })
            .catch(() => {
            })
        })
      }

下面这种是针对固定上传接口地址：

通过设置uploadImgServer来实现的具体配置如下

// 为true，则上传后的图片转为base64编码，为false,则上传图片到服务器，二者不能同时使用
this.editor.config.uploadImgShowBase64 = false
// 服务器接收的上传图片的属性名
this.editor.config.uploadFileName = 'file'
// 服务器上传图片的接口地址
this.editor.config.uploadImgServer =‘你的指定路径’
// 默认限制图片大小是 5M ，可以自己修改。
this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024 
// 限制一次性上传数量
this.editor.config.uploadImgMaxLength = 2
// 限制类型,可自定义配置,默认为： ['jpg', 'jpeg', 'png', 'gif', 'bmp']
this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png']
this.editor.config.uploadImgHooks = {
 // 图片上传并返回结果，但图片插入错误时触发
   fail: function (xhr, editor, result) {
 	 console.log(result)
  },
  success: function (xhr, editor, result) {
 	 // 图片上传并返回结果，图片插入成功之后触发
 	 console.log('success')
  }
}