js base64图片对象转File对象或Blob对象上传服务器

File对象和Blob对象上传服务器的区别：

base64转成blob对象上传到服务器时，后端是无法使用getOriginalFilename()方法获取到原始的文件名的。也就是说blob对象是不能保存文件名的，如果想使用blob上传，需要额外加一个字段传文件名到服务器，而file对象是可以存储文件名的。

base64图片对象转File对象

dataURLtoFile(dataurl,filename) {
        var arr = dataurl.split(',');
        var mime = arr[0].match(/:(.*?);/)[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, {type:mime});
        //转换成成blob对象
        //return new Blob([u8arr],{type:mime});
      },

base64图片对象转Blob对象

convertBase64UrlToBlob(urlData){
        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 : 'image/png'});
      }

 使用ajax上传文件

let formData = new FormData();
          formData.append("file", this.dataURLtoFile(res));
          putFile(formData).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }, error => {
            window.console.log(error);
          })

export const putFile = (data) => {
  return ajax({
    url: '/api/文件上传地址',
    method: 'post',
    data: data,
    // headers: {
    //   'Content-Type': 'multipart/form-data'
    // },
  })
}