vue实现大文件切片上传
利用file里面的slice方法可以将文件切片,前端进行切片处理向http并发传递。等所有切片上传完成后再向服务器发送一个合并切片的请求。<input type="file" @change="onChange" ref="fileInput" />onChange() {let self = this;let file = this.$refs.fileInpu...
·
利用file里面的slice方法可以将文件切片,前端进行切片处理向http并发传递。等所有切片上传完成后再向服务器发送一个合并切片的请求。
<input type="file" @change="onChange" ref="fileInput" />
onChange() {
let self = this;
let file = this.$refs.fileInput.files[0];
if (!file) return;
// 这里我们将切片固定成六分,也可以固定大小上传
let axiosArray = [];
let chunkList = [];
let chunkSize = file.size / 6;
let current = 0;
let i = 0;
let fileName = Date().getTime() + "_" + file.name;
while (current < 6) {
chunkList.push({
chunk: file.slice(current * chunkSize, (current + 1) * chunkSize),
fileName: current + "_" + fileName
});
current++;
}
// 切片并发传给后端,这里我们要注意切片上传时请求头是 multipart/form-data 合并切片时请求头是x-www-form-urlencoded,只能上传键值对
chunkList.map(function(item) {
let form = new FormData();
form.append("file", item.chunk);
form.append("fileName", item.fileName);
axiosArray.push(
self.$axios.post("/api/album/upload", form, {
headers: { "Content-Type": "multipart/form-data" }
})
);
});
// 所有切片上传成功后合并
Promise.all(axiosArray).then(res => {
self.$axios.post("/api/album/uploadMerge", `fileName=${fileName}`);
});
}
更多推荐
已为社区贡献1条内容
所有评论(0)