当前位置：首页 > news >正文

vue3+ts+vite+ElementPlus上传进度条实时更新(UPLoad和progress)。

news 2025/8/10 14:16:47

需求：

上传文件时，展示进度条实时更新：

下面是代码片段:

  <!-- 添加媒体弹窗 -- 上传 --><el-dialog v-model="centerDialogVisible" title="媒体信息" width="700" :close-on-click-modal="false"><el-form><el-form-item><span><el-upload class="upload-demo" ref="upLoadRef" :limit="1" multiple drag:http-request="(file: any) => uploadFille(file)" :headers="headers" action="#" :on-success="handleSuccess"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><template #tip><div class="el-upload__tip">图片最大支持20M，视屏最大支持4G，音频最大支持20M，文档最大支持20M，超出大小将不会进行上传.</div></template></el-upload><el-progress :percentage="uploadPercentage"></el-progress></span></el-form-item></el-form></el-dialog>

:http-request="(file: any) => uploadFille(file)"：自定义文件上传请求的处理函数
:headers="headers"：设置上传请求的头部信息。
:limit="1"：限制最多上传一个文件。
action="#"：设置上传请求的 URL，这里使用 # 作为占位符，实际上传逻辑在 http-request 中处理。
:on-success:上传文件成功时候的函数

JavaScript：

这里本来是封装好的请求方法，但是因为进度条问题，只能换成另一种写法。如果伙伴们用原来的这种方法搭配其他可以更新进度条的方法也可以实现实时更新。

原来的：

const uploadFille = ({ file }: any) => {if (file) {try {let formData: any = new FormData()formData.append('file', file)addMedia(formData).then((res: any) => {if (res.code !== 200) return ElMessage.error('上传失败,' + res.msg)handleSuccess()})console.log(formData.get('files'))} catch (error) {console.log(error)}}
}

修改后的：

const uploadPercentage = ref(0)
//上传 -- 加进度条实时更新
const uploadFille = async ({ file }: any) => {if (file) {try {let formData: any = new FormData()formData.append('file', file)await axios.post(baseURL, formData, {// 更新进度条的函数onUploadProgress: (event: any) => {uploadPercentage.value = Math.floor((event.loaded * 100) / event.total);},headers: {'Content-Type': 'multipart/form-data','Authorization': 'Bearer ' + getToken(),'clientid': import.meta.env.VITE_APP_CLIENT_ID},})} catch (error) {console.log(error)}}uploadPercentage.value = 100;
}// 上传成功事件
const handleSuccess = () => {if( uploadPercentage.value!==100) uploadPercentage.value = 100;ElMessage.success('上传成功')searchMediaHan()
}