0
点赞
收藏
分享

微信扫一扫

vue图片url转file对象

何以至千里 2021-09-30 阅读 92
Vue脚手架

1.为了方便使用,我将其封装起来,放在mixins混合中;主要是为了解决文件上传之后,再次上传的问题。

export const imgUrlToFile = {
  data() {
    return {
    };
  },
  methods: {
    // 将图片的url转成file
    fileProcess(fileUrl,filename){
        let _this=this;
          var demoImg = document.createElement("img")
          demoImg.src = fileUrl
              var img = fileUrl;
          var image = new Image();
          // 给img加上随机值一部分情况下能解决跨域
          // image.src = img + '?time=' + new Date().valueOf();
          image.src = img;
          // 允许跨域操作
          image.setAttribute("crossOrigin",'anonymous');
          image.onload = function(){
            var base64 = _this.getBase64Image(image);
            var newFile = _this.dataURLtoFile(base64,filename);
            _this.fileList.push({
                  name: filename,
                  url: fileUrl,
                  raw:newFile
            });
            //  console.log(_this.fileList)
            // demoImg.src=base64.dataURL;
            // var blob = _this.convertBase64UrlToBlob(base64);
            // console.log(blob);
          }
        },
        // 将url转换为base64
        getBase64Image(img) {
          var demoCanvas = document.createElement("canvas");
          demoCanvas.width = img.width;
          demoCanvas.height = img.height;
          var ctx = demoCanvas.getContext("2d");
          ctx.drawImage(img, 0, 0, 300, 150);
          var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
          var dataURL = demoCanvas.toDataURL("image/"+ext);
          return {
            dataURL: dataURL,
            type: "image/"+ext
          };
        },
         //将base64转换为file文件
      dataURLtoFile(dataurl, filename) {
        var arr = dataurl.dataURL.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});
      },
     // 将url转换为blob
     convertBase64UrlToBlob(base64){ 
        var urlData =  base64.dataURL;
        var type = base64.type;
        var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
        //处理异常,将ascii码小于0的转换为大于0  
        var ab = new ArrayBuffer(bytes.length);  
        var ia = new Uint8Array(ab);  
        for (var i = 0; i < bytes.length; i++) {  
            ia[i] = bytes.charCodeAt(i);  
        }  
        return new Blob( [ab] , {type : type});  
      },
     
  }
};

2.在页面中调用

this.fileProcess(item,name))

参考地址:
https://www.cnblogs.com/liangpi/p/10615000.html
https://blog.csdn.net/qq_42991509/article/details/100925856

举报

相关推荐

0 条评论