js操作本地文件傳輸

1. FileReader()：點擊查看詳情
2. URL.createObjectURL()：點擊查看詳情

File對象,就是一個文件,比如我用input type="file"標籤來上傳文件,那麼裏面的每個文件都是一個File對象.
Blob對象,就是二進制數據,比如通過new Blob()創建的對象就是Blob對象.又比如,在XMLHttpRequest裏,如果指定responseType爲blob,那麼得到的返回值也是一個blob對象.

• FileList：代表⼀個⽂件列表對象，類數組
• FileReader：⽤於從⽂件中讀取數據
• FileWriter：⽤於向⽂件中寫出數據

讀取爲二進制傳輸文件：

var fileObj = ev.target.files[0];       
var reader = new FileReader();            
reader.readAsArrayBuffer(fileObj); 
reader.onload = function () {    //文件讀取完執行
     let data = this.result     
     var byts = new Uint8Array(data); 
     var bytarr = []; 
     for (var i = 0; i < byts.length; i++) {
         bytarr.push(byts[i]);
     }
     console.log(data);          
     console.log(bytarr);
 }

把二進制 bytarr 傳給後端即可。

參考

js操作本地文件對比

URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似：

區別：

• FileReader.readAsDataURL(blob || file)可以獲取一段data:base64的字符串
• URL.createObjectURL(blob || file)可以獲取當前文件的一個內存URL

執行時機：

• createObjectURL是同步執行（立即的）
• FileReader.readAsDataURL是異步執行（過一段時間）

內存使用：

• createObjectURL返回一段帶hash的url，並且一直存儲在內存中，直到document觸發了unload事件（例如：document close）或者執行revokeObjectURL來手動釋放。
• FileReader.readAsDataURL則返回包含很多字符的base64，並會比blob url消耗更多內存，但是在不用的時候會自動從內存中清除（通過垃圾回收機制）

兼容性方面兩個屬性都兼容ie10以上的瀏覽器。

優劣對比：

使用createObjectURL可以節省性能並更快速，只不過需要在不使用的情況下手動釋放內存
如果不太在意設備性能問題，並想獲取圖片的base64，則推薦使用FileReader.readAsDataURL

本地瀏覽示例：

	<input type="file" id="btn" accept="image/*" value="點擊上傳" />
	<img id="img"/>
	btn.addEventListener('change',function(){
		let file = this.files[0];
		let url = URL.createObjectURL(file)
		img.src = url;
		img.onload = function(){
			URL.revokeObjectURL(url);//釋放掉內存
		};
	})

	<input type="file" id="btn" accept="image/*" value="點擊上傳" />
	<img id="img"/>
	btn.addEventListener('change',function(){
		let file = this.files[0];
		let Reader = new FileReader();
		Reader.readAsDataURL(file);
		Reader.onload = function(d){
			console.log(this.result)
			img.src = this.result;
		}
	})

絕對地址下載文件

axios({
    url:res,
    method:'get',
    responseType:'blob'
}).then(re=>{
    console.log(re);
    var link = document.createElement('a');
    var body = document.querySelector('body');
    link.href = window.URL.createObjectURL(re.data);
    link.download = name;
    link.target = "_blank";
    link.style.display = 'none';
    body.appendChild(link);
    link.click();
    body.removeChild(link);
    window.URL.revokeObjectURL(link.href);
}).catch(res=>{
    console.log(res)
    Vue.prototype.$Message.error('oss文件地址訪問失敗')
})