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大文件切片上傳怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。