vue3 上传文件带进度条

 1是我的进度条，这里我用了遮罩层的方式

2是我上传成功的地方

3是上传按钮

 

//所有请求都会从这里经过
// 创建一个 axios 实例
const service = axios.create({
	baseURL: '/api', // 所有的请求地址前缀部分
	timeout: 60000, // 请求超时时间毫秒
	withCredentials: true, // 异步请求携带cookie
	headers: {
		// 设置后端需要的传参类型
		'Content-Type': 'application/json',
		'tk': '',//这里我放的是token，文章不让传
		'X-Requested-With': 'XMLHttpRequest',
	},
})

接口中 {onUploadProgress:UploadProgress}是重点，是请求返回数值

//api后端接口
import httpRequest from './index'


// 上传图片
export const 接口名称= (params: any,UploadProgress: any) =>
 httpRequest.post('接口', 参数,{onUploadProgress:UploadProgress}).then(res => res.data)

 我这边用的是elementpuls组件

<