一、自定义请求控制上传进度条
HTML部分
<a-upload multiple :customRequest="onUpload" :beforeUpload="onBeforeUpload"><a-button> 选择文件 </a-button></a-upload>
JS部分
/* 上传前钩子 */const onBeforeUpload = (file) => {};/* 上传 */const onUpload = (item) => {const formData = new FormData();// 其他参数formData.append('type', 'series');// 上传文件formData.append('file', item.file);request({url: '/upload',method: 'post',data: formData,onUploadProgress: (e) => {// 文件上传进度回调if (e.lengthComputable) {item.onProgress({percent: (e.loaded / e.total) * 100 });}}}).then((res) => {item.onSuccess();}).catch((e) => {item.onError();});};
二、多文件合并上传请求一个接口
HTML部分
<a-upload multiple :beforeUpload="beforeUpload" :customRequest="customRequest" :show-upload-list="false"><a-button> 选择文件 </a-button></a-upload><a-button @click="customRequest"> 重试 </a-button>
JS部分
import debounce from "lodash-es/debounce"const fileList = ref([]);const beforeUpload = (file, list) => {fileList.value = list;};const customRequest = debounce(() => {const formData = new FormData();fileList.value.map((file) => {formData.append('file[]', file);});uploadFilesTest(formData).then((res) => {console.log('上传成功');}).catch((e) => {console.log(e.message);});}, 300);
效果
