关于vant Uploader 上传的图片和文件回显重新编辑中遇到的问题

1、图片和文件在上传之前是base64和file格式的才能在缩略图中显示相关信息，然而上传之后图片转换成了https的网络地址的形式，即二进制数据格式（不知道说法对不对），总之是个网络地址可以直接在浏览器上显示的，文件可以直接从浏览器上下载下来。当Uploader 上传的页面需要重新显示缩略图的时候需要再次给图片进行转换成base64格式的，而文件则需要加上文件名字。收下解决图片的显示问题，即如何将https的地址信息转换成base64格式和File格式。（下面是我的参考地址）

https://blog.csdn.net/weixin_43693458/article/details/110469741?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-110469741-blog-113126941.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-110469741-blog-113126941.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=2

实际应用中做了一些修改

注意

调用的时候只调用upload3DNoticeImg

因为是Promise格式的返回值所以需要在.then中接收resolve的返回值

upload3DNoticeImg(imgSrc) {
 		// 返回一个Promise
      return new Promise((resolve, reject) => {
        let image = new Image();
        image.src = imgSrc;
        // image.setAttribute("crossOrigin", 'Anonymous'); // 须设置这个属性，不然toDataURL会报错，并且后端需设置允许跨域
        let that = this
        image.onload = function() { 
        // 找出文件名
          let t = this.src.split('?')[0] // 这里要根据图片路径和业务定
          let fileIndex = t.lastIndexOf("/"); // 这里要根据图片路径和业务定
          let filename = t.substr(fileIndex + 1); // 这里要根据图片路径和业务定
          // 文件的Base64字符串
          let base64 = that.getBase64Image(image);
          // Base64字符串转二进制
          let blob = that.dataURLtoBlob(base64);
          // blob 转为 二进制文件
          let file = that.blobToFile(blob, filename);
          //let formData = new FormData();
          // 此时的file就是图片的二进制文件，可以上传   
          let objimg={} 
          objimg.content=base64
          objimg.file=file
          resolve(objimg)
        } 
      })
    },
    getBase64Image(img) {
      var canvas = document.createElement("canvas"); // 创建一个canvas元素
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 找到后缀名
      var dataURL = canvas.toDataURL("image/" + ext);  // 调用 toDataURL,输出base64
      return dataURL;
    },
    dataURLtoBlob(dataurl) {
      let arr = dataurl.split(','); 
      let mime = arr[0].match(/:(.*?);/)[1]; // 找到类型mime:"image/png"
      let bstr = atob(arr[1]); // base64 解码
      let n = bstr.length;
      let u8arr = new Uint8Array(n);  //创建n个无符号整型数组
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n); // 转Unicode编码
      }
      return new Blob([u8arr], {
        type: mime
      }); //新建类文件对象
    },
    blobToFile(theBlob, fileName) {
	   theBlob.lastModifiedDate = new Date();
	   theBlob.name = fileName;
	   return theBlob;
 },

经过转换的图片就可以显示在缩略图中了，图片信息赋值给<van-uploader class="up-img" v-model="img">双向绑定的变量 。

2、关于文件的名字回显的时候消失的问题

文件重新接收的时候也是https的格式不携带其他的文件信息，这个时候需要自己从https地址中剥离文件名字再显示出来下面是我实际运用中的代码this.file是上传的双向绑定的变量【】olddata.file是从后端获取的https的文件地址

for(let i=0;i<olddata.file.length;i++) {
			      let item = olddata.file[i]
            let name = olddata.file[i].substring(olddata.file[i].lastIndexOf("/")+1)
			          item = {
                  //前面这几个的id、name、path、type有没有都无所谓，命名也无所谓
                  //但是下面这两个必须是url和file
                  url: olddata.file[i], //这个url请求后台获取二进制流文件，使图片可以回显出来
                  file: new File([], name, {}) //就是这个new File([], item.attachmentName, {}),有他就可以回显文件名称了
            }
			    this.file.push(item)
		    }

注意：new File去重新定义文件的名字（文件的缩略图是个icon所以不需要转换成base64只需要提供地址和名字就可以再次编辑）

参考地址https://blog.csdn.net/weixin_42540974/article/details/121539208?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-121539208-blog-114086632.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-121539208-blog-114086632.pc_relevant_default&utm_relevant_index=5

下面是效果图写到最后发现图片可能不需要转换也能显示哈哈哈哈哈像文件一样就可以

最后说明里面都是参考大佬文档结合了实际应用的一些东西，侵权请联系删除