前端文件上传、下载

文件上传

二进制类型传输：Blob

1. Files对象：文件对象，有文件相关属性和方法

//下面都用这个举例
<input type="file" name="file" @change="fileChange">

<script>
    function fileChange(e){
        //e.target.files为数组，不管多选还是单选，都是数组
        //file为文件对象的示例
        let file = e.target.files[0]
    }

若想要直接拿到File对象实例：new File([fileCotentn],'fileName')
2. Blob对象

function fileChange(e){
     let file = e.target.files[0]
     //filbBlob为转为二进制的文件(参数必须为数组)
	 let fileBlob = new Blob([file])
	 //slice方法：slice(startIndex,endIndex)
	 let _sliceBlob = fileBlob.slice(0,5000)
	 //slice方法可用来做缩略图、文本预览(使用vue写法做示例)
	 //<img :src = '_sliceBlob '/>
	 //使用File对象转化为file
	 let _sliceFile = new File([_sliceBlob],'filename.png')
 }

3. FormData对象：用于向后台传输数据（原生图表数据上传）
   二进制数据只能只有FormData传输给后台

//假设已经获取到文件file
function submit(e){
 	let formData = new FormData()
 	//加入文件（可以是file、blob、text三种类型）
 	//formName：表单的字段名
 	formData.append('formName',file,'fileName')
 	//加入user
 	forData.append('user',userName)
 	//发起请求
 	axios.post('apiUrl',formData)
}

base64传输 - 转为base64

可直接通过接口传输

拓展：fileReader - 文件读取形式（text、base64 ）

• readAsArrayBuffer(blob)：读取为ArrayBuffer
• readAsDataURL(blob)：读取为base64
• readAsText(blob, encoding)：读取为文本，可指定编码（通常为UTF-8）
  blob为读取的文件，通常为file（文件）或blob（二进制）类型

function fileChange(e){
 	 let file = e.target.files[0]
	 let fileBlob = new Blob([file])
	 let _sliceBlob = fileBlob.slice(0,5000)
	 let _sliceFile = new File([_sliceBlob],fileName.png)
	//fileReader对象实例
	let fr = new FileReader()
	//读取为base64格式
	fr.readAsDataUrl(file)
	//读取为text
	fr.readAsText()
	//不能直接拿到结果，是异步操作
	//使用onload事件
	fr.onload = function(){
		//处理结果
	    let readerfile = fr.result
	}
}

文件下载

直接打开地址下载

//url为二进制格式
window.open('url')

• 无法为下载的文件命名
• 只适用get方
• 返回的数据必须为二进制

利用a标签的download

• creatObjectURL(blob)：把blob对象的内存地址，以url的形式返回
• a标签的download属性：a标签为下载行为
• msSaveBlob(fileBlob,downloadType)：IE不支持标签下载，用的是msSaveBlob的方案
  在创建请求时，接收的数据类型为Blob：responseType:‘blob

//1. 请求设置为：responseType:blob
//假设接收到Blob类型的文件：fileBlob

if(window.navigator.msSaveBlob){
	//如果是ie浏览器就会存在window.msSaveBlob方法
	// id浏览器只能用这个方法
	window.navigator.msSaveBlob(fileBlob,{type:'Excel/xml'},fileName)
}else{
	//2. 通过creatObjectURL()返回一个url
	let blobUrl = window.URL.creatObjectURL(fileBlob)
	//3. 创建一个a标签
	let downloadLink = document.creatElement('a')
	//4. 设置href为downloadLink 
	downloadLink.href = blobUrl 
	//5. 设置download属性
	a.download = 'fileName'
	//a标签藏起来
	downloadLink.style.display = 'none'
	//模拟点击
	downloadLink.click()
	//销毁地址(清内存)
	window.URL.revokeObjectURL(blobUrl )
}

flie-saver

• 下载file-saver：npm install file-saver --save

import {saveAs} from 'ile-saver'
saveAs(fileBlob,'fileName')

拓展-文件预览：base64

将Blob类型转化为base64：使用FileReader对象的readAsDataUrl