需求描述

已知：图片上传使用base64格式，图片返回是URL。
需求：现在活动修改页面，需要将URL上传转换成base64之后，再提交给后端。
注意事项：这种写法除非你本地和服务器是同源的，否则本地测不了，需要等打板之后进行测试。

URL转换成base64

urlToBase64(url) {
      return new Promise((resolve, reject) => {
        let image = new Image();
        image.onload = function() {
          let canvas = document.createElement('canvas');
          canvas.width = this.naturalWidth;
          canvas.height = this.naturalHeight;
          // 将图片插入画布并开始绘制
          canvas.getContext('2d').drawImage(image, 0, 0);
          // result
          let result = canvas.toDataURL('image/jpeg', 0.55);
          resolve(result);
        };
        // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute('crossOrigin', 'Anonymous');
        image.src = url;
        // 图片加载失败的错误处理
        image.onerror = () => {
          reject(new Error('urlToBase64 error'));
        };
      });
    },

异步转换，完成转换之后，向服务端请求

    let promises = [];
        this.activityParams.content.forEach((item, index) => {
          item.advertOrder = index + 1;
          if (item.advertContent.includes('.jpeg')) {
            let imgUrL = this.activityParams.picPath + item.advertContent;
            promises.push(
              this.urlToBase64(imgUrL).then(async (res) => {
                // 转化后的base64图片地址
                item.advertContent = res.replace('data:image/jpeg;base64,', '');
              }),
            );
          }
        });
        if (this.activityParams.actPic.includes('.jpeg')) {
          let imgUrL = this.activityParams.picPath + this.activityParams.actPic;
          promises.push(
            this.urlToBase64(imgUrL).then((res) => {
              // 转化后的base64图片地址
              this.activityParams.actPic = res.replace('data:image/jpeg;base64,', '');
            }),
          );
        }
        Promise.all(promises).then(async () => {
          try {
            await carApi.carMgmtActiveEdit({
              _channelId: this.activityParams.channelId,
              activityMgmtVo: this.activityParams,
              advertTitle: this.activityParams.advertTitle,
              content: this.activityParams.content,
            });

            this.$message.success('活动修改成功');
            this.$router.push({ name: 'activityQry' });
          } catch (error) {
            this.$message.error('活动修改失败');
            this.activityParams.channelId = this.activityParams.channelId.split(',');
            this.activityParams.labelId = this.activityParams.labelId.split(',');
          }
        });