图片在线url转base64与file,可上传

基本思路

1. 先转base64
   - 将图片画到canvas(canvas.drawImage())
   - 通过canvas.toDataURL()生成base64
2. 再用base64转可以上传的blob或file

 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就是图片的二进制文件，可以上传       
      })
    },

 /**
  * 图像转Base64
   */
   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;
    },

 /**
    *Base64字符串转二进制
    */
    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;
 },