vue3 文件夹上传进度获取

//属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
//如果lengthComputable为false，就获取不到e.total和e.loaded
if (e.lengthComputable) {
var rate = (uploadRate = e.loaded / e.total); //已上传的比例
if (rate < 1) {
//这里的进度只能表明文件已经上传到后台，但是后台有没有处理完还不知道
//因此不能直接显示为100%，不然用户会误以为已经上传完毕，关掉浏览器的话就可能导致上传失败
//等响应回来时，再将进度设为100%
uploadRate = rate;
}
}

1.函数定义

async function upzip(params:any) {
	let config = {
		onUploadProgress: function (e) {
			
			
				if (e.progress.toFixed(2) < 1) {
					pcuploadRate.value = e.progress.toFixed(2) * 100;
				}
		
			// if (e.lengthComputable) {
			// 	var rate = (uploadRate = e.loaded / e.total); //已上传的比例
			// 	if (rate < 1) {
			// 		//这里的进度只能表明文件已经上传到后台，但是后台有没有处理完还不知道
			// 		//因此不能直接显示为100%，不然用户会误以为已经上传完毕，关掉浏览器的话就可能导致上传失败
			// 		//等响应回来时，再将进度设为100%
			// 		uploadRate = rate;
			// 	}
			// }
		},
	};
	let param = { params, config };
	try {
		const { code, msg } = await uploadfile(param);
		if (code > 0) {
			pcuploadRate.value = 100;
			ElMessage({
				showClose: true,
				message: '上传成功',
				type: 'success',
			});
		} else {
			ElMessage({
				showClose: true,
				message: '上传失败' + msg,
				type: 'error',
			});
		}
	} catch (e) {
		ElMessage({
			showClose: true,
			message: '错误: ' + e,
			type: 'error',
			duration: 0,
		});
	}
}

2.接口定义

export function uploadfile(param: any) {
	return request({
		url: 'xxxxxx',
		method: 'post',
		data: param.params,
		headers: { 'Content-type': 'multipart/form-data' },
		onUploadProgress: param.config.onUploadProgress,
	});
}