Detailed explanation of the implementation example of el-upload large file slice 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 is an extra parameter sent to the top, that is, the:data="uploadData" in el-upload, which is brought in according to actual needs.            //file is a file            let url = "/api/XXX" //Upload file interface            try {
                 = file;
                 = 
                const res = await (url, data);
                return res;
            } catch (e) {
                return e;
            }
        },
       async uploadByPieces:(url, { key,file }) {
            // Slice every 5M slice            const chunkSize = 5 * 1024 * 1024; // 5MB per piece            // Total number of films            const chunkCount = ( / chunkSize); 
            // Generate promise collection and perform asynchronous processing            // That is, use            const promiseList = []
            try {
                for (let index = 0; index < chunkCount; ++index) {
                    //Asynchronously perform shard upload                    (readChunk(index))
                }
                const res = await (promiseList)
                return res
            } catch (e) {
                return e
            }
            //------The above is the main logic of slice upload, which is relatively simple            //-----The following are the methods that need to be called when slicing            // Get the current chunk data            const getChunkInfo = (file, index) => {
                let start = index * chunkSize;
                let end = (, start + chunkSize);
                let chunk = (start, end);
                return { start, end, chunk };
            };
            // Shard upload interface            const uploadChunk = (data) => {
            // Since this project uses ajax, the following writing method is performed            // It can also be changed to axios, the principle is the same, mainly to cooperate with the plug-in and return to 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 upload for a single file            const readChunk = (index) => {
                const { chunk } = getChunkInfo(file, index);
                let formdata = new FormData();
                ("key", key);
                ("file", chunk);
                return uploadChunk(formdata)
            }
        },
  }
}