快捷導(dǎo)航

el-upload大文件切片上傳實(shí)現(xiàn)示例詳解

更新時(shí)間：2023年03月15日 09:06:03 作者：小亮_money

這篇文章主要為大家介紹了el-upload大文件切片上傳實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景

前端上傳大文件時(shí)，會出現(xiàn)跨域錯誤等各類錯誤，另切片上傳可以提高上傳效率。固進(jìn)行以下代碼記錄，方便后期cv(??)

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是上送的額外參數(shù)，也就是el-upload中的:data="uploadData",根據(jù)實(shí)際需求帶入
            //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一片，進(jìn)行切片
            const chunkSize = 5 * 1024 * 1024; // 5MB一片
            // 總片數(shù)
            const chunkCount = Math.ceil(file.size / chunkSize); 
            // 生成promise集合，進(jìn)行異步處理
            // 也就是Promise.all的使用
            const promiseList = []
            try {
                for (let index = 0; index < chunkCount; ++index) {
                    //異步執(zhí)行分片上傳
                    promiseList.push(readChunk(index))
                }
                const res = await Promise.all(promiseList)
                return res
            } catch (e) {
                return e
            }
            //-----以上是切片上傳的主要邏輯，是比較簡單的
            //-----以下是切片時(shí)需要調(diào)用的方法
            // 獲取當(dāng)前chunk數(shù)據(jù)
            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) => {
            // 因該項(xiàng)目用到的是ajax，所以進(jìn)行以下寫法
            // 同樣可更改為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);
                        }
                    })
                })
            }
            // 針對單個(gè)文件進(jìn)行chunk上傳
            const readChunk = (index) => {
                const { chunk } = getChunkInfo(file, index);
                let formdata = new FormData();
                formdata.append("key", key);
                formdata.append("file", chunk);
                return uploadChunk(formdata)
            }
        },
  }
}