前端文件操作

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

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

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

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

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

html结构:<input type="file" name="file" @change="fileChange" /&gt;
		<button @click="submit"&gt;提交</button&gt;

js:fileChange(e){
	console.log(e.target.files) 
    //这读取的是一个数组，一般单选的都是读取第一个,e.target.files[0]
    
    //取出文件对象
    let file = e.target.files[0]
    //限制上传大小
    if(file.size &gt; 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
    }
    
}

代码007普通

打赏 收藏 海报 链接