富文本组件上传图片及回显图片

上传：

   watch: {
      content(val) {
        this.setBaseImg(val);
      },
    },
save(){
this.updataImg();
this.ruleForm.activityContent = this.content;//this.ruleForm.activityContent要传给后端的参数
}

//把路径转成key
      updataImg() {
        let content = this.content;
        var self = this;
        let imgReg = /<img.*?(?:>|\/>)/gi // 匹配图片中的img标签
        let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
        let arr = content.match(imgReg) // 筛选出所有的img

        if (arr != null) {

          for (let i = 0; i < arr.length; i++) {
            let src = arr[i].match(srcReg)
            // 获取图片地址判断是否是base64格式

            if (src[1].indexOf('https://') != -1) {
              var a = src[1].split('?')[0].split('https://oilpay-test.oss-cn-shanghai.aliyuncs.com/')[1];
              self.content = self.content.replace(src[1], a);
            }
          }
        }
      },

回显：

created(){
this.$http.post("",data).then(res=>{//请求后端接口获取回显数据
           this.content = res.data.activityContent;
          this.list1 = [res.data];
          this.listInit();
}


 // list初始化
      listInit(content) {
        var self = this;
        for (let j = 0; j < this.list1.length; j++) {
          let contents = this.list1[j].activityContent;
          let imgReg = /<img.*?(?:>|\/>)/gi // 匹配图片中的img标签
          let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
          let arr = contents.match(imgReg) // 筛选出所有的img
          console.log(arr)
          if (arr != null) {
            for (let i = 0; i < arr.length; i++) {
              let src = arr[i].match(srcReg)
              // 获取图片地址判断是否是base64格式

              var promise = new Promise(function(resolve, reject) {
                if (src[1].indexOf('https://') == -1 && src[1].indexOf('base64') == -1) {
                  self.$http.post("api/oss/signKey", {
                    key: src[1]
                  }).then(res => {
                    if (res.code == "0") {
                      if (i == arr.length - 1) {
                        contents = contents.replace(src[1], res.data);
                        setTimeout(() => {
                          resolve(); //等所有图片加载完成，大图片有点慢
                        }, 200)
                      } else {
                        contents = contents.replace(src[1], res.data);
                      }

                    }
                  })
                }
              })
            }
            promise.then(() => {
              contents = contents.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"');
              this.list1[j].activityContent = contents;
              this.content = this.list1[0].activityContent
              this.ruleForm = this.list1[0];
            })
          } else {
            this.list = this.list1;
          }
        }
      },

 

 //把key转成路径
      setBaseImg(val) {
        console.log('tiptiptip1')
        let content = val;
        var self = this;
        let imgReg = /<img.*?(?:>|\/>)/gi // 匹配图片中的img标签
        let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配图片中的src
        let arr = content.match(imgReg) // 筛选出所有的img
        let srcArr = []
        console.log(arr)
        if (arr != null) {

          for (let i = 0; i < arr.length; i++) {
            let src = arr[i].match(srcReg)
            // 获取图片地址判断是否是base64格式

            if (src[1].indexOf('base64') == -1) {
              if (src[1].indexOf('https://') == -1) {
                self.$http.post("api/oss/signKey", {
                  key: src[1]
                }).then(res => {
                  self.loading = false
                  if (res.code == "0") {
                    console.log(res.data)
                    self.content = self.content.replace(src[1], res.data);
                  }
                })
              }
            } else {
              console.log('tiptiptip')
              srcArr.push(src[1])
            }
          }
          let formData = new FormData()
          srcArr.forEach(item => {
            // 将base64转换成文件流
            var file = this.dataURLtoFile(item, new Date().getTime());
            this.handleAvatarSuccess(file, item);
          })

        }
        // console.log(content)
      },
      handleAvatarSuccess(file, item) {
        var _self = this;
        this.fileUrl = URL.createObjectURL(file);
        this.$http.post("api/oss/getSign").then(res => {
          if (res.code == 0) {
            _self.aliyunOssToken = res.data;
            this.uploadFile(file, item);
          }
        })
      },