vue3+ts el-upload多文件上传时展示上传进度条

原创已于 2024-11-09 11:45:51 修改 · 952 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-09-28 16:20:28 首次发布

单文件上传
api代码

export const uploadFileHandle2 = (params: any,  url: string, onProgress:any) => {
	const formData = new window.FormData();
	params.forEach((file: any) => formData.append('files', file.raw));
    // 如果有自定义参数
    if (params.data) {
        Object.keys(params.data).forEach((key) => {
            const value = params.data[key];
            if (Array.isArray(value)) {
                value.forEach(item => {
                    formData.append(`${key}[]`, item);
                });
            } else {
                formData.append(key, value);
            }
        });
    }
    return request({
        url: url,//接口路径
        method: 'POST',
        data: formData,
        headers: {
            'Content-Type': 'multipart/form-data',
            ignoreCancelToken: true,
        },
		onUploadProgress: progressEvent => {
            const total = progressEvent.total as any;
            const current = progressEvent.loaded;
            const percentage = Math.round((current / total) * 100);
            if (onProgress) {
                onProgress(percentage); // 调用回调函数传递进度
            }
        },
    });
};

vue代码

<el-upload :before-upload="beforeUpload" v-model:file-list="fileList" :multiple="true" :show-file-list="false" :http-request="uploadUrlHandle">
	<el-button type="primary">上传文件</el-button>
</el-upload>
 <!-- 进度条弹窗 -->
		<el-dialog :modal="false"  v-model="showProgressBar" title="上传进度" width="30%" style="border-radius: 10px;position: fixed; bottom: 20px;right: 20px;" >
			<div v-if="uploadProgress !== null">
				<el-progress :percentage="uploadProgress"></el-progress>
			</div>
			<div v-else>
				<el-progress :percentage="0"></el-progress>
				上传失败
			</div>
		</el-dialog>


// 上传前的钩子
const beforeUpload = (file: File) => {
	fileList.value = [];
	// 控制只上传一次
	if (!hasUploaded.value) {
		hasUploaded.value = true;
		return true; // 允许上传
	}
	return false; // 阻止上传
};
const uploadProgress = ref(null);
const fileList = ref([]);
const hasUploaded = ref(false);
const onProgress = (progress: any) => {
	uploadProgress.value = progress; // 更新进度
};
const showProgressBar = ref(false);
const uploadUrlHandle = async (options: UploadRequestOptions, data: any) => {
	uploadProgress.value = null; // 重置进度
	const params = fileList.value.filter((item: any) => {
		return item.status === 'ready';
	});
	showProgressBar.value = true; // 显示进度条弹窗
	uploadPics(params, onProgress)
		.then(async (res) => {
			debugger;
			if (res.data.code == 200) {
				hasUploaded.value = false;
				res.data.result.forEach((item: any, indexA: any) => {});
			} else {
				hasUploaded.value = false;
			}
		})
		.catch((error) => {
			console.error('Upload failed:', error);
			hasUploaded.value = false;
			uploadProgress.value = null; // 重置进度
			fileList.value = [];
		});
};