vue3 上传文件带进度条

最新推荐文章于 2023-12-29 14:07:10 发布

sky亦恒

最新推荐文章于 2023-12-29 14:07:10 发布

阅读量1.7k

点赞数

文章标签：前端 javascript json

本文链接：https://blog.csdn.net/sky_laogong/article/details/128305544

版权

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组件

之前有文件改变的钩