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文件地址访问失败')
})