base64圖片轉化成文件

承接《vue截取video視頻中的某一幀》視頻截取后保存的是base64格式，沒法上傳服務器，需要轉化一下

 

//將base64轉換為文件
  dataURLtoFile(dataurl, filename) {
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1];
    if(!filename) {//若無文件名則取當前時間戳
      filename = Date.parse(new Date()) + '.jpg';
    }
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
  },

//base64轉化為blob
dataURItoBlob(base64Data) {
    var byteString;
    if(base64Data.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Data.split(',')[1]);
    else{
        byteString = unescape(base64Data.split(',')[1]);
    }
    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for(var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var blob = new Blob([ia], {
        type: mimeString
    });
    return blob;
}  

//轉化你的base64圖片
let blob = this.$api.dataURLtoFile(this.base64Data)
//再包裝一下
let formData = new FormData();    
formData.set("file", blob);
//最后將  formData   上傳到你的ajax接口

我使用的是轉化成文件的方式，一開始使用blob上傳的時候總報500，后台說因為沒有文件名，所以又該用第一種方法，各位小伙伴可以根據后台接口的實際情況選擇