这篇文章主要介绍“el-upload大文件切片上传怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“el-upload大文件切片上传怎么实现”文章能帮助大家解决问题。
<el-upload action="" :data="uploadData" :http-request="uploadFileContinue">
</el-upload>
export default {
name: '',
data () {
return {
uploadData:{
key: ""
}
},
watch: {
},
computed: {
},
created () {
},
mounted () {
},
destroyed () {
},
methods: {
async uploadFileContinue({ data, file }) {
//data是上送的额外参数,也就是el-upload中的:data="uploadData",根据实际需求带入
//file是文件
let url = "/api/XXX" //上传文件接口
try {
data.file = file;
data.key = file.name
const res = await this.uploadByPieces(url, data);
return res;
} catch (e) {
return e;
}
},
async uploadByPieces:(url, { key,file }) {
// 每5M一片,进行切片
const chunkSize = 5 * 1024 * 1024; // 5MB一片
// 总片数
const chunkCount = Math.ceil(file.size / chunkSize);
// 生成promise集合,进行异步处理
// 也就是Promise.all的使用
const promiseList = []
try {
for (let index = 0; index < chunkCount; ++index) {
//异步执行分片上传
promiseList.push(readChunk(index))
}
const res = await Promise.all(promiseList)
return res
} catch (e) {
return e
}
//-----以上是切片上传的主要逻辑,是比较简单的
//-----以下是切片时需要调用的方法
// 获取当前chunk数据
const getChunkInfo = (file, index) => {
let start = index * chunkSize;
let end = Math.min(file.size, start + chunkSize);
let chunk = file.slice(start, end);
return { start, end, chunk };
};
// 分片上传接口
const uploadChunk = (data) => {
// 因该项目用到的是ajax,所以进行以下写法
// 同样可更改为axios,原理一样,主要是配合插件,返回Promise
return new Promise((resovle, reject) => {
$.ajax({
url: url,
type: 'POST',
data: data,
contentType: false,
processData: false,
success: function (res) {
resovle(res);
},
error: function (err) {
reject(err);
}
})
})
}
// 针对单个文件进行chunk上传
const readChunk = (index) => {
const { chunk } = getChunkInfo(file, index);
let formdata = new FormData();
formdata.append("key", key);
formdata.append("file", chunk);
return uploadChunk(formdata)
}
},
}
}
切片上传后,需要将文件合并才能使用文件的预览,文件合并由服务端进行。
关于“el-upload大文件切片上传怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://juejin.cn/post/7210310775277092924