wangEditor3 + 七牛云上传

最近公司从阿里云换成七牛云，使用的wangEditor版本又很低，作者已经不维护了，专门加了群去问，但还是解决不了，虽然他的官网上有专门配置七牛云的代码，我还是配置没成功。。。实属有点菜了~

整个难点都是在七牛云上传每次key都要不一样

我的解决方法是是将整个wangEditor的创建过程放入获取token的接口里，然后在每次上传前重置key，这样每次上传key都会不一样了

mounted(){
    // 获取token接口
    this.$API.upload.getFileToken().then(res=>{
      let token = res.data
      let that = this;
      this.toolId = this.randomString(12);
      this.editorId = this.randomString(12);
      this.content = this.value;
      this.$nextTick(() => {
        this.editor = new wangEditor(
          this.$refs[this.toolId],
          this.$refs[this.editorId]
        );
        this.editor.customConfig.onchange = (html) => {
          // 监控变化，同步更新到 textarea
          this.content = html;
        };
        this.editor.customConfig.uploadImgServer = uploadData.imgUploadUrl;
        this.editor.customConfig.uploadImgMaxLength = 1
        // 七牛云上传参数必传
        this.editor.customConfig.uploadImgParams = {
          token,
          // 随机十二个字符,防止过短过长和重新的问题
          key:that.randomString(12)
        }
        this.editor.customConfig.uploadFileName = 'file';
        this.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
        this.editor.customConfig.uploadImgHooks = {
          before: function (xhr, editor, files) {
            editor.customConfig.uploadImgParams.key = that.randomString(12)
          },
          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
          customInsert: function (insertImg, result, editor) {
            let url =`http:你的七牛云外链地址/${ result.key }`
            // 保存url
            insertImg(url);
          },
        };
        this.editor.create();
        this.editor.txt.html(this.value);
      })
    })
}

这里比较疑惑的是，如果在外面不配置好customConfig的参数，那么在before里即使修改参数，在上传时也不会带上修改后的参数

customConfig配置好，在before里重新配置一下key，每次上传的key就会不一样啦~

最后

以上就是陶醉芝麻为你收集整理的wangEditor3 + 七牛云上传的全部内容，希望文章能够帮你解决wangEditor3 + 七牛云上传所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。