wangEditor3 + 七牛云上传

最新推荐文章于 2023-12-07 11:09:23 发布

如晴天似雨天~

最新推荐文章于 2023-12-07 11:09:23 发布

阅读量663

点赞数

文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/weixin_50163731/article/details/121520144

版权

本文介绍了在更换云服务提供商从阿里云到七牛云后，如何解决wangEditor中图片上传key需要每次不同的问题。通过在获取token接口中创建编辑器并在before上传钩子中动态重置key，确保了每个上传文件的key独特。详细步骤包括编辑器初始化、配置上传参数以及在before钩子中更新key。

摘要由CSDN通过智能技术生成

最近公司从阿里云换成七牛云，使用的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就会不一样啦~