最近在使用 wangEditor3 编辑器时,发现有时候无法成功上传。后来发现竟然是文件名的问题,如果文件名中出现了中括号 "[" 或者 "]",会报“插入图片错误”。(可以通过传参对比参数发现原因所在)
正确传参:
错误传参:
解决方法:
后来尝试在后台接受端过滤掉中括号 "[" 和 "]",发现还没接受到图片信息的时候就已经报错了。无法解决 wangEditor3 上传图片问题,于是尝试在前台传参的时候解决问题。
前台只需要将传递的 "name" 过滤掉中括号就可以了。查阅官网发现如下一条文档:
通过添加一行 editor.customConfig.uploadFileName = 'myFileName'; 便完美解决了 wangEditor3 无法上传图片的问题。
// 创建编辑器 editor = new E('#operate-edit'); editor.customConfig.uploadImgServer = this.url; editor.customConfig.uploadImgHooks = { customInsert: function (insertImg, result, editor) { let url = tmpBaseUrl + result.data.url; insertImg(url); } }; editor.create(); editor.txt.html(this.detailInfo.cpxqms); this.detailPics = []; res.data.picture.forEach(item => { tmpUrl = this.imgURL + item.image_url_src; this.detailPics.push(tmpUrl); });