<template> <el-upload class="avatar-uploader" action="api/file/upload" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-progress="handleUploadProgress" :on-success="handleAvatarSuccess" ref="upload" > <el-button slot="trigger">Upload File</el-button> <div v-if="uploadProgress > 0"> <el-progress :percentage="uploadProgress"></el-progress> </div> </el-upload> </template> <script> export default { data() { return { uploadProgress: 0, }; }, methods: { beforeAvatarUpload(file) { // do some validation on the file }, handleUploadProgress(event, file, fileList) { this.uploadProgress = event.percent; }, handleAvatarSuccess(response, file, fileList) { this.uploadProgress = 100; setTimeout(() => { this.uploadProgress = 0; }, 1000); }, }, }; </script>
标签:vue,进度条,fileList,uploadProgress,file,上传,event From: https://www.cnblogs.com/xbinbin/p/17315390.html