基于axios 封装的大文件分片上传

// 上传文件
// import Vue from ‘vue‘
import {
    uploadStart,
    uploadData,
    completed,
    qsbuploadStart,
    qsbuploadData,
    qsbcompleted,
} from ‘@/api/upLoad‘
export default function (e) {
    return function (ele, obj = {
            fileSize: 0,
            accept: ‘*‘,
            uptype: [],
            unverify: ‘‘,
            url_QSB: ‘‘
        },
        funs
        ,) {
        let us = uploadStart;
        let ud = uploadData;
        let cl = completed;
        if (e == ‘qsb‘) {
            us = qsbuploadStart;
            ud = qsbuploadData;
            cl = qsbcompleted;
        }
        // let body = document.getElementsByTagName(‘body‘)[0];
        let upele = document.createElement(‘input‘);
        upele.type = ‘file‘;
        upele.setAttribute(‘multiple‘,‘multiple‘)
        // console.dir(upele);
        upele.style.display = ‘none‘;
        upele.style.zIndex = ‘9999‘;
        upele.accept = obj.accept;
        // body.append(upele)
        ele.onclick = function () {
            upele.click()
            return false;
        }
        upele.onchange = async () => {
            let files = upele.files;
            console.log(files);
            if (!files) {
                return;
            }
            let upfile = async (files, j) => {
                // 判断是否超出所选文件个数 如果超出直接退出
                if (j == files.length) {
                    upele.value = ‘‘;
                    return;
                }
                //执行上传前条件检查
                if (funs.beforecheck) {
                    if (!funs.beforecheck()) {
                        upele.value = ‘‘;
                        return;
                    }
                }
                // 获取当前选中文件
                let file = files[j];
                // 对文件类型进行检查
                if (obj.accept !== ‘*‘) {
                    if (obj.accept.split(‘/‘)[0] !== file.type.split(‘/‘)[0]) {
                        this.$message.error(‘选择的文件类型不正确‘);
                        upele.value = ‘‘;
                        return;
                    }
                } else {
                    if (obj.uptype) {
                        if (obj.uptype.indexOf(file.name.split(‘.‘).pop()) == -1) {
                            this.$message.error(‘选择的文件类型不正确‘)
                            upele.value = ‘‘;
                            return;
                        }
                    }
                }
                // 对文件切块进行计算
                let filetotal = (file.size / (1024 * 1024)).toFixed(0)
                if (!obj.fileSize == 0) {
                    if (file.size > obj.fileSize) {
                        this.$message.error(‘所选文件不能大于‘ + obj.fileSize / (1024 * 1024) + ‘M,请确认‘);
                        upele.value = ‘‘;
                        return;
                    }
                }
                // 第一步上传即将上传的文件信息 获取文件ID值
                let data = {
                    fileSize: file.size, // 要上传的文件大小
                    fileName: file.name, //要上传的文件名
                    blockTotal: filetotal, // 分割数量
                    blockSize: 1024 * 1024, //定义切片大小
                    userId: sessionStorage.getItem(‘USER_ID‘), //上传文件的用户ID
                    fileType: ‘‘,
                }
                // console.log(obj.unverify);
                //第一步上传初始信息
                let fileId = await us(data, obj.unverify, obj.url_QSB);
                if (fileId.code !== ‘0000‘) {
                    this.$message.error(‘上传文件基础信息出错,请检查‘);
                    upele.value = ‘‘;
                    return;
                } else {
                    // 对文件进行切片
                    let start = 0; //切片文件大小开始
                    let end; //切片文件大小结束
                    let updata = async (i, fileId, funs) => {
                        start = 1024 * 1024 * i; //  对文件切片开始大小计算
                        end = start + 1024 * 1024; //对文件切片结束大小计算
                        end > file.size ? end = file.size : end; //对文件结尾大小归0
                        let chunk = file.slice(start, end); //切割文件
                        var formData = new FormData();
                        formData.append("blockData", chunk);
                        formData.append("blockIndex", i + 1);
                        formData.append("userId", sessionStorage.getItem(‘USER_ID‘));
                        formData.append("fileUploadId", fileId.data.fileUploadId);
                        // 上传切片后的文件
                        let d = await ud(formData, obj.unverify, obj.url_QSB);
                        if (!d) {
                            this.$message.error(‘上传文件失败‘);
                            upele.value = ‘‘;
                            return;
                        }
                        if (d.code == ‘0000‘) {
                            funs.upschedule ? funs.upschedule(files.length,j,i / Number(filetotal)) : ‘‘;
                            if (i == filetotal) {
                                // 上传结束后调用合并文件
                                let succes = await cl({
                                    userId: sessionStorage.getItem(‘USER_ID‘),
                                    fileUploadId: fileId.data.fileUploadId
                                }, obj.unverify, obj.url_QSB);
                                if (succes.code !== ‘0000‘) {
                                    this.$message.error(‘合并文件失败‘);
                                    upele.value = ‘‘;
                                    setTimeout(() => {
                                        upfile(files,j+=1)
                                    }, 500);
                                    return;
                                } else {
                                    console.log(files);
                                    this.$message.success(‘上传文件成功‘)
                                    funs.callback ? funs.callback([j, files.length-1], fileId) : ‘‘;
                                    setTimeout(() => {
                                        upfile(files,j+=1)
                                    }, 500);
                                    return;
                                }
                            } else {
                                i++;
                                updata(i, fileId, funs);
                                return;
                            }
                        }
                    }
                    let i = 0;
                    updata(i, fileId, funs)
                }
            }
            upfile(files,0)
        }
    }
};

  

基于axios 封装的大文件分片上传

上一篇:axios封装


下一篇:Windows建立Cucumber和Ruby测试环境