vue将图片链接转换为file文件类型

先建一个文件common.js,代码如下:

一、首先把图片路径转换为base64的格式

// 图片转为base64格式
export const imageToBase64 = (img) => {
      var canvas = document.createElement("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/jpeg" + ext);
      return dataURL;
  };

二、base64格式转为File文件类型

  export const base64ToFile = (urlData, fileName) => {
    let arr = urlData.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bytes = atob(arr[1]); // 解码base64
    let n = bytes.length
    let ia = new Uint8Array(n);
    while (n--) {
        ia[n] = bytes.charCodeAt(n);
    }
    return new File([ia], fileName, { type: mime });
}

三引用

import {
  imageToBase64,
  base64ToFile,
} from "@/filters/common.js";
export default { 
  methods: {
//此处封装
    handleImgToBase64(url, cb) {
      let that = this;
      var image = new Image();
      image.crossOrigin = "";
      image.src = url;
      image.onload = function () {
        let base64 = imageToBase64(image); //图片转base64

        let file = base64ToFile(base64, "file"); //base64转File

        // 根据自身需求调整【因个人项目逻辑不一样，这里使用回调函数】
        cb && typeof cb == "function" && cb(file);
        return file;
      };
    },
//此处调用
  geFile(){
    var url = "http://......" 
    this.handleImgToBase64(url, (res) => {
           console.log(res)
          });
     }
  }
}