关于 input file上传文件的原理

html中上传文件的标签为input type = “file”,底层原理其实是上传了一个文件，通过form表单形式提交，把文件对象转化成二进制对象。
这里我们可以手动实现img标签上传至服务器的过程：

var img = document.createElement("img");
      img.src = e.target.src;
      //此处如果遇到canvas跨域问题，就给图片的crossorigin加上anonymous属性就好了
      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 dataURL = canvas.toDataURL();//得到图片的base64位编码值
      var arr = dataURL.split(","),//转化成数组，以，分割
        mime = arr[0].match(/:(.*?);/)[1],//匹配类型
        bstr = atob(arr[1]),//对base64编码的字符解码
        n = bstr.length,
        u8arr = new Uint8Array(n);//新建一个没有符号的只有长度的数组
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);//对解码过得字节码进行转换，转换成2进制数据
      }
      this.CommitImg(
        new Blob([u8arr], {
          type: mime,
        })
      );//new 一个二进制对象，类型为{ mine }

//var formdata = new FormData();
//将二进制对象使用new formdata添加到表单数据中，再使用axios进行提交
//Unit8Array为一个无符号的8位数组，与arraybuffer类似