Vue3+ElementPlue文件批量上传(自定义上传列表)

目录

上传功能的拆解

上传组件

选择图片

文件列表组件

文件列表操作

上传逻辑

完整代码

开发过程中遇到的问题及解决方案

---

需求：批量图片上传，可在列表中多选或全选，上传时可浏览进度，完成后清空列表。后端接口限制15张图片请求一次，前端限制一次最多选择三百张图片

技术栈：vue3+element-plus

上传功能的拆解

上传组件

基于element-plus的el-upload组件

    


        
            
            

                Drop file here or
                click to upload
            
            
        

选择图片

使用组件中的on-change属性获选择的所有图片

注：使用on-cahnge获取多选图片时，每次图片变化都会被调用，如果只想获取一次则使用一个定时器获取到最后一次选择的图片

// 文件变化Handle
const waitFileChange = (file: any, fileList: any[]) => {
    let cLength = fileList.length;
    flgs.value.maxLength = Math.max(cLength, flgs.value.maxLength);
    // 防止多次执行change
    setTimeout(() => {
        //防止函数多次调用后赋值错误
        if (cLength !== flgs.value.maxLength) return;
        flgs.value.maxLength = null;
        //限制单次选择最大数为300
        if (fileList.length > 300) {
            alertMsg('error', '单次上传文件最大数量为300');
            waitFileList.value = fileList.splice(0, 300);
        } else {
            waitFileList.value = fileList;
        }
        //计算文件大小
        fileList = fileList.map(x => ({
            ...x,
            newSize: `${(x.size / Math.pow(1024, 2)).toFixed(2)}M`
        }));
   
    }, 0);
};

文件列表组件

文件列表绑定的数据为on-change所选择的数据

文件列表操作

注：在删除文件列表数据的同时，需要删除el-upload自带的文件列表区域(删除el-upload的数据列表后数据存在，但是无法看到)

// 删除列表
function deleteRow(uid: number, uploadRef: any) {
    waitFileList.value = waitFileList.value.filter(x => x.uid != uid);
    //删除el-upload自带的数据
    uploadRef.handleRemove(waitFileList.value);
}
// 表格选中的数据
function handleSelectionChange(fileList: any[]) {
    selectedFile.value = fileList;
    // 预防分割导致数据变化
    flgs.value.selectedFile = deepCopy(fileList)
}

上传逻辑

function uploadBegin(uploadRef: any) {
    // 前置条件
    if (!flgs.value.projectId) return alertMsg('warning', '请选择批次');
    if (selectedFile.value.length == 0) return alertMsg('warning', '请选择要上传的文件');
    // loading
    flgs.value.processFlgs = true;
    // 十五张图片一次请求，使用步长为1表示测试状态下一张图片请求一次
    for (let i: number = 0; i < flgs.value.selectedFile.length; i += 1) {
        // 每次添加后删除原有数据
        let uploadFile: any[] = selectedFile.value.splice(0,selectedFile.value.length<1 ? selectedFile.value.length : 1);
        //调用上传API
        uploadAPI(uploadFile,uploadRef)
    }
}
function uploadAPI(list: any[], uploadRef: any) {
    const formData = new FormData();
    formData.append('projectId', flgs.value.projectId);
    //把文件流使用formData格式发送
    list.forEach(x => {
        formData.append('files', x.raw);
    });
    postFormData(DataM.upload, formData).then(res => {
        flgs.value.count++
        // 进度条数据
        flgs.value.processNum = ((flgs.value.count) / flgs.value.selectedFile.length) * 100;
        // 上传完成时初始化数据
        if (flgs.value.processNum == 100) {
            flgs.value.processFlgs = false;
            flgs.value.count = 0
            //过滤上传列表中已上传的数据
            waitFileList.value = deWeight(waitFileList.value,flgs.value.selectedFile)
            //清除el-upload组件中的已上数据(重点)
            uploadRef.handleRemove(flgs.value.selectedFile);
            alertMsg('success', '上传成功' || res.message);
        }
    });
}

完整代码

开发过程中遇到的问题及解决方案

1.使用on-change属性时多次调用绑定的方法

将选中数据的赋值放到定时器(任务队列)中，让每次都拿到最后一次change的数据

2.自定义上传列表数据删除时，上传组件原有的数据未删除

如果不需要上传组件自带的上传列表，删除即可，但是原有的数据会一直存在上传组件的插槽中，需要在删除自定义上传列表的同时删除原有插槽中的数据，否则会一直存在

3.数组切割导致素组被破坏，循环无法正常运行

关于基本数据类型和引用数据类型的知识点，因为数据属于引用数据类型，在赋值的时候只是赋值的地址而不是数据本身，所以原有的数据发生改变时，当前的数据也会变化。此问题解决方案为使用深拷贝拷贝一份数据即可

4.循环调用使用接时，每次的请求参数都会变为循环最后一次所得的参数(与第一个问题可以互相引用)

因为请求是异步的，导循环已经执行完毕之后才开始请求，导致请求参数错误。涉及到JS的执行机制，JS会执行栈中的任务(同步)，栈中的任务完后才执行任务队列中的任务(异步)