介绍
在实际工作中前端相互传输文件时，前端会采用二进制，文本格式或者base64传输，要了解前端文件格式有哪些和这些格式之间怎么转换，先熟悉以下概念：
-
files：文件对象的API，有很多对文件的操作方法，可在w3c官方文档查看
-
Blob：不可变的二进制对象API，包含很多操作方法，和file基本有一样的操作方法
-
FormData：用于和后端传输文件的对象，是一种采用键值对传递数据的API
-
FileReader:多用于把文件读取为某种形式的API，如base64,txt文本
下面这张图展示文件在前端的各种格式的转换
文件上传
模板部分
<div><!-- multiple 多文件上传 --><input type="file" @change="fileChange" multiple /><img v-if="imagebase64" :src="imagebase64" /><button @click="submit">提交</button></div>
单文件上传
let imagebase64 = ref();
let _fileObj = ref();```
const fileChange = (e: any) => {// file对象// console.log(e.target.files[0]);let file = e.target.files[0];_fileObj.value = file;if (file.slice > 10 * 24 * 24) {alert("文件不能大于10兆");}/*转换成blob对象new Blob([file])new Blob([file]).slice(0,5000) 切割文件blob对象切割方法slice*/let _sliceBlob = new Blob([file]).slice(0, 5000);// 转换为file对象，需要两个参数，文件和文件名// let _sliceFile = new File([_sliceBlob], "test");let _sliceFile = new File([file], "test");// FileReader可以做缩略图let fr = new FileReader();// 转换为base64fr.readAsDataURL(_sliceFile);/* 文件读取时异步，需要监听onload事件 */fr.onload = function () {// fr.result 最后的结果// console.log(fr.result);// console.log(imagebase64.value);imagebase64.value = fr.result;};
};
//提交
const submit = async () => {let fromData = new FormData();// 单文件上传fromData.append("file", _fileObj.value);// 发请求// axios.post('/xxx',fromData)
);
多文件上传
// 多文件上传
let fileList = ref([]);
const fileChange = (e: any) => {// 多文件上传if (e.target.files.length > 1) {fileList.value.push(e.target.files);} else {fileList.value.push(e.target.files[0]);}
};
const submit = async () => {let fromData = new FormData();// 多文件上传fileList.value.forEach((item) => {let fromData = new FormData();fromData.append(item.name + "file", item);});// 发请求// axios.post('/xxx',fromData)
}
};
切片上传
let _fileObj = ref();let precent = ref(0);// 切片上传const fileChange = (e: any) => {// 切片上传_fileObj = e.target.files[0];
};
const submit = async () => {// 切片上传// 分割文件的大小let size = 2 * 1024 * 1024;// 获取文件的总大小let fileSize = _fileObj.value.size;// 开始进度let current = 0;fromData.append(_fileObj.value.name, _fileObj.value.slice(current, current + size));while (current < fileSize) {await axios.post("http://localhost:4000/upload",fromData);//百分比进度precent.value = Math.min((current / fileSize) * 100, 100);current += size;}
};
