相关概念

前端上传文件给后端的方式：

1. 二进制blob对象传输 ===》 通过fromData搭载blob对象传输给后端
2. base64传输 ===》 转为base64传输给后端

与文件相关的对象

1. files对象 ===》 通过input标签读取的文件对象，files对象是blob对象的子类 拥有Blob对象的方法
2. blob对象 ===》 二进制大对象，内容不可变
3. formData ===》 前端将文件传输给后端的搭载工具对象
4. fileReader ===》 将文件读取为某种特定形式的对象，如base64,text文本等

上传示例

<input type="file" name="file" @change="fileChange" />

一、相关功能

1、上传限制

通过 file = e.target.files[0] 可获取到上图的文件对象，据此可以进行一些列上传限制操作： 如： 文件大小：flie.size, 文件类型 file.type

fileChange = (e) => {
    let file = e.target.files[0] //获取文件对象，如上图
    if(file.size >10 *1024 * 1024){
        alert('文件不能大于10M')
    }
    if(file.type !== 'video/mp4') {
        alert('文件类型必须为mp4')
    }
}

2、file对象转化为blob文件进行切割(切片上传原理)

flie文件对象与blob文件对象的转化关系：

1. file转化为blob: new Blob([file])
2. blob转化为file: new File([blob], 'text.png')

flie文件转化为blob后会生成一串blob字符串，因此可以进行切割字符串的方式切割文件，例如切割掉一半长度的字符串，则文件最终也只显示一半。

 let sliceBlob = new Blob([file].slice(0, 5000) //file转为blob
 let sliceFile = new File([sliceBlob], 'text.png')

切割文件后的回显：

let fr = new FileReader() 
fr.readAsDataUrl(sliceFile) //将切割后的文件读取为base64
//在onload事件中将地址返回给Img标签的src进行回显
fr.onload = () => {
    img.src = fr.result 
}

二、上传

方式1.将file文件通过formData搭载后传递给后端

    let formData = new FormData()
    formData.append('filename',e.target.files[0])
    axios.post('/api',formData)

方式2.将file文件读取为base64或text传递给后端

    let fr = new FileReader() 
    fr.readAsDataUrl(e.target.files[0]) //将文件读取为base64
    //在onload事件中将base64地址传递给后端
    fr.onload = () => {
       axios.post('/api',fr.result) 
    }