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