vue url转file文件

这里只是简单的转换 需要解决跨域 当然没有跨域问题可以不解决 
如果需要其他需求可以自己封装

//图片地址转base64格式
    imgToBase64(url,cb){
      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 dataURL = canvas.toDataURL('image/png');
         console.log(dataURL)   //Base64  码  一般用这个就行
        cb && cb(dataURL);
        canvas = null;
      };
      img.src = url;
    },
    //base64转file对象
    base64toFile(base, filename){
      var arr = base.split(',');
      var mime = arr[0].match(/:(.*?);/)[1];
      var suffix = mime.split("/")[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      //转换成file对象
      return new File([u8arr], `${filename}.${suffix}`, { type: mime });
    },
//使用
this.imgToBase64(imgUrl,base =>{
            let file = this.base64toFile(base,'图片')
       })

自己封装的一版 
methods写放法
//url 转file文件 方法待优化
    imgToBase64(url) {
      let img_name = url
        .split("/")
        [url.split("/").length - 1].substring(
          0,
          url.split("/")[url.split("/").length - 1].length - 4
        ); //获取图片名称
      console.log(url.split("/")[url.split("/").length - 1]);
      var canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        img = new Image();
      img.setAttribute("crossOrigin", "*");
      var dataURL = "";
      img.onload = () => {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        dataURL = canvas.toDataURL("image/jpg");
        // console.log(dataURL); //Base64  码  一般用这个就行
        this.base64toFile(dataURL, img_name);
        canvas = null;
      };
      img.src = url;
    },
    //base64转file对象
    base64toFile(base, filename) {
      var arr = base.split(",");
      var mime = arr[0].match(/:(.*?);/)[1];
      var suffix = mime.split("/")[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      let URL = window.URL || window.webkitURL;
      let obj = {
        name: `${filename}.jpg`,
        type: "image/jpg",
        raw: new File([u8arr], `${filename}.${suffix}`, { type: mime }),
        url: URL.createObjectURL(new File([u8arr], `${filename}.${suffix}`, { type: mime })),
      };
      this.fileList2.push(obj);
      //转换成file对象
      return new File([u8arr], `${filename}.${suffix}`, { type: mime });
    },
    //url 转file文件





//mounted调用

 let img_list = [
      "http://192.168.1.100:8081/img/login-left.7dc900e1.png",
      "http://192.168.1.100:8081/img/1.03338c30.png",
    ];
    for (let i = 0; i < img_list.length; i++) {
      this.imgToBase64(img_list[i]);
    }

你可能感兴趣的:(uniapp,vue,vue.js,javascript,前端)