【VUE3】element+中upload组件多文件上传多次请求接口改为单次请求

问题描述：

【VUE3】element+中upload组件多文件上传会将各文件分次请求接口，导致接口请求过于频繁，且不方便统一处理回调

解决方案：

1，取消组件自带上传

2，通过on-change获取文件后，手动上传

代码演示：

一，template模块

<!-- 组件引用配置 -->
 <el-upload 
         ref="upload"         
         action="#"           //action为必填，所以用#占位，无意义无作用
         :limit="100"        //最多可选择100个文件
         multiple               //允许批量选择文件
         :on-exceed="handleExceed"  //超出限制时触发
         :auto-upload="false"  //取消自动上传
         :on-change="onChangeFj"  //文件改变时均会触发
  >
       <template #trigger>
            <el-button type="primary">选择文件</el-button>
       </template>
</el-upload>
<!-- 手动上传 -->
 <el-button type="primary" @click="uploadFj">确认</el-button>

二，script模块

//文件改变时，选择，上传，删除等
function onChangeFj(file, fileList) {
    fileListArr.value = fileList;
}

//手动封装批量上传
function uploadFj() {
    //所需参数
    let formData = new FormData(); 
    //获取文件
    fileListArr.value.forEach((item) => {
        formData.append("file", item.raw);
    });
    //添加其他参数
    formData.append("stationNo", stationInfo.value.stationNo);
    //请求接口
    privateApi.importExcelVMUL(formData).then((res) => {
        if (res.code === 200) {
            //批量上传成功后的回调
            proxy!.$modal.msgSuccess('导入成功');
            upload.value!.clearFiles();  //清除上传文件
            importDialogFlag.value = false;
            importform.modularType = '';
            handleQuery();
        }else{
            proxy!.$modal.msgError('导入失败' +res.msg );
        }
    }).catch((err) => {
        proxy!.$modal.msgError('导入失败' +err.response.data.msg );
    });
}