el-upload 图片回显，通过图片路径获取raw属性

思路：将图片路径—>base64—>blob—>file文件

index.vue

 <el-upload action="#" :auto-upload="false" :file-list="imgList" >      
 </el-upload>

图片路径转base64，base64转file文件方法

 methods: {
    async getBase64FromImageURL(url) {
      return new Promise((resolve) => {
        var canvas = document.createElement('canvas'),
          ctx = canvas.getContext('2d'),
          img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function () {
          canvas.height = img.height
          canvas.width = img.width
          ctx.drawImage(img, 0, 0)
          var base64URL = canvas.toDataURL('image/png');
          resolve(base64URL)
          canvas = null;
        };
        img.src = url;
      })
    },
    // base64转为file文件
    getFileFromBase64(base64URL, filename) {
      var arr = base64URL.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    }
 }

处理后台返回来数据

 // res模拟后台返回来的数据
 var res = {
   imgList: [{
     name: "1.JPG",
     url: "/dev-api/profile/upload/2023/08/01/1.JPG"
   }, {
     name: "2.JPG",
     url: "/dev-api/profile/upload/2023/08/01/2.JPG"
   }]
 }
  var _this = this;
  let scfile = [];
  var imgArr = res.imgList.reduce(async function (acc, cur, i) {
    return acc.then(() => {
      return new Promise(async (resolve, reject) => {
        let res = await _this.getBase64FromImageURL(cur.url);
        let imgFile = _this.getFileFromBase64(res, cur.name);
        scfile.push(imgFile)
        resolve(scfile);
      })
    })
   }, Promise.resolve())

  imgArr.then(res => {
    console.log(res);//该数据为处理完成后的file文件数组
  })