vue3 上传文件带进度条

最新推荐文章于 2024-08-23 11:53:54 发布

sky亦恒

最新推荐文章于 2024-08-23 11:53:54 发布

阅读量1.9k

点赞数

文章标签：前端 javascript json

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

版权

这篇博客介绍了如何在Vue3中实现文件上传并显示进度条的功能。使用了element-plus组件，通过监听'onUploadProgress'接口获取上传进度，并利用遮罩层展示进度条效果。在文件选择改变时，通过'on-change'钩子获取文件信息，分别存储在上传中和待上传的文件数组里。同时，展示了上传成功的处理和上传按钮的交互逻辑。

摘要由CSDN通过智能技术生成

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