背景：
后臺同學：同學蕉鸳，下載圖片你能不能自己下載，不用調我接口忍法，base64圖片你也有
我：想了一下潮尝，能成，用a標簽饿序，設置href為base64的值勉失，豈不是就完成了，就回答到原探，可以
后臺同學：那你能實現(xiàn)我就不提供了
我：沒問題乱凿，小case
開始吧：
3下5除2寫完了，就是將base64的值賦值給創(chuàng)建的a標簽的href
測試一下：完蛋咽弦，瀏覽器不允許
然后一頓百度猛如虎
后來找到了一個可行性方案徒蟆，跟大家分享一下，可以直接使用
思路：
1型型，將base64轉化為File 文件
2段审，動態(tài)創(chuàng)建a標簽實現(xiàn)文件流的下載
上代碼：
1)將base64轉化為File 文件
dataurl: 'data:image/png;base64,XXXXX...',
filename: '文件名'
base64ImgtoFile (dataurl, filename = 'file') {
//將base64格式分割：['data:image/png;base64','XXXX']
const arr = dataurl.split(',')
// .*？ 表示匹配任意字符到下一個符合條件的字符 剛好匹配到：
// image/png
const mime = arr[0].match(/:(.*?);/)[1] //image/png
//[image,png] 獲取圖片類型后綴
const suffix = mime.split('/')[1] //png
const bstr = atob(arr[1]) //atob() 方法用于解碼使用 base-64 編碼的字符串
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
},
2)將1中得到的File轉化為圖片的URL
const blob = this.base64ImgtoFile(dataurl)
const blobUrl = window.URL.createObjectURL(blob);
// 這里的文件名根據(jù)實際情況從響應頭或者url里獲取
const filename = blob.name;
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename;;
a.click();
window.URL.revokeObjectURL(blobUrl);
通過上面2步即可完成前端base64圖片的下載
進一步思考：如何將文件轉換為base64那闹蒜？
例如：我們利用element el-upload很容易獲取到上傳的文件
利用new FileReader對象的readAsDataURL方法可以將讀取到的文件編碼成DataURL
changeFile(file, fileList) {
var This = this;
var reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = function(e){
this.result; //base64編碼
This.imageBaseUrl = this.result;
This.imageUrl = this.result;
}
},
