markdown

最新推荐文章于 2023-03-14 10:25:27 发布

Mr阿斌

最新推荐文章于 2023-03-14 10:25:27 发布

阅读量185

点赞数 1

分类专栏：笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/mrqi122/article/details/125789967

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在Vue应用中实现文件上传功能，包括调用API接口、设置请求头、监听上传进度，并展示了如何在页面上实时显示上传进度条。示例代码中，点击按钮触发文件选择，选择文件后发起POST请求到'/upload'，同时更新进度条的百分比，整个过程简洁明了。

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

api

export function uploadFile(data, callback){
return request({
url:‘/upload’,
method:‘post’,
data,
headers:{
‘Content-type’: ‘multipart/form-data’
},
onUploadProgress:callback
})
}

上传

<el-button @click="clickUploadFile">点击上传文件</el-button>
<input type="file" @change="selectFile" hidden ref="uploadRef">
<el-progress type="circle" :percentage="progress" v-show="progress>0&&progress<100"></el-progress>
	function clickUploadFile() {
	proxy.refs.uploadRef.click()
}
async function selectFile(e) {
	const file = e.target.files[0]
	let formData = new FormData()
	formData.append("file", file)
	const res = await uploadFile(formData, uploadProgress)
}
let progress=ref(0)
function uploadProgress(e) {
 progress.value=parseFloat((e.loaded/e.total*100).toFixed(2))

}