el-upload大文件切片上传怎么实现

这篇文章主要介绍“el-upload大文件切片上传怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“el-upload大文件切片上传怎么实现”文章能帮助大家解决问题。

html

<el-upload action="" :data="uploadData" :http-request="uploadFileContinue"></el-upload>

js

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大文件切片上传怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。