前端的文件操作有哪些

前端把文件上传给后端，一般有两种方案

0. 二进制blob传输，也就是formData传输
1. base64传输，也就是转为base64传输

base64这种比较简便，但是花费的时间会稍微长一些，毕竟转成64要花时间，后端解码也要时间

文件操作的相关对象有安歇

0. files：通过input标签读取的文件对象，files类是blob类的一个子类
1. blob：不可变的二进制内容，包含很多操作方法
2. formData：用于和后端传输的对象，后端是不认识files和blob这两种对象的，他得通过formData这个载体来传递
3. fileReader：多用与把文件读取为某种形式，如base64，text文本

html结构:<input type="file" name="file" @change="fileChange" />
        <button @click="submit">提交</button>
​
js:fileChange(e){
    console.log(e.target.files) 
    //这读取的是一个数组，一般单选的都是读取第一个,e.target.files[0]
    
    //取出文件对象
    let file = e.target.files[0]
    //限制上传大小
    if(file.size > 10 * 24 * 24) {
        alert('文件不能大于10兆')
    }
    //限制文件类型
    if(file.type !== 'video/mp4') {
        alert('必须是mp4文件')
    }
    
    
    //上面说到了，file对象是blob对象的一个子类，那就是file可以转成blob,注意！要传数组进去哦
    console.log(new Blob([file]))
    
    //Blob 对象有个切割方法
    let _sliceBlob = new Blob([file]).slice(0,5000) //切割0-5000位
    
    let _sliceFile =    new File([_sliceBlob],"test.png") //把切割后的转成文件
    
    
    let fr = new FileReader()
    fr.readAsDataURL(_sliceFile)  //这种是转成base64
    // fr.readAsText() //这种是转成文本格式
    
    //因为这个 转换是异步转换 ，所以需要 监听onload
    fr.onload = function() {
        console.log(fr.result) //输出转化后的结果
    }
}
​
​
​
//上传操作
async ssubmit() {
    let _formData = new FormData();
    _formData.append('file',_fileObj) //这边的_fileObj是读取出来的文件对象
    axios.post("/xxxxxx",_formData)
}
​
​
​

切片上传

async submit(){
    let size = 2 * 1024 * 1024
    let fileSize = _fileObj.size
    let current = 0
    while(current < fileSize) {
        //await 的作用是，只有上一个切片上传成功， 才能进行下一个切片的上传
        let _formData = new FormData()
        _formData.append(_fileObj.slice(current,current+size)
        await axios.post('http:xxxxxx', _formData)) //每次只上传2M
        current += size
    }
    
}