实现上传文件进度条（vue+axios+element-ui）

最新推荐文章于 2024-12-08 09:20:07 发布

单调的王先森

最新推荐文章于 2024-12-08 09:20:07 发布

阅读量1k

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_51198863/article/details/117923598

版权

这篇博客介绍了如何在Vue项目中实现文件上传功能，包括限制文件类型、设置上传状态和显示上传进度。通过使用`el-upload`组件和`axios`处理HTTP请求，配合`el-progress`组件实时更新上传进度条。示例代码详细展示了文件上传前的验证、 formData 创建、axios的onUploadProgress监听以及进度条更新的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相关组件

// 上传组件
```javascript
<el-upload class="upload-demo" :before-upload="beforeUpload">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
// 进度条组件
<el-progress :percentage="progress "></el-progress>

<script>
...
methods:{
	beforeUpload(file) {
       const type = file.file.name.slice(-3);
       if (!this.fileType.includes(type)) {
            this.$message('文件类型不支持');
            return;
       }
       this.uploadStatus = 1;
       this.progress = 0;
       const formData = new window.FormData();
       const that = this;
       formData.append('file', file.file);
       axios({
          url: 'xxx',
          method: 'POST',
           data: formData,
           // eslint-disable-next-line eqeqeq
           onUploadProgress: (progressEvent) => {
           // eslint-disable-next-line
            let complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
            // 这里为上传的进度
           that.progress = complete;
           },
           }).then((res) => {...});
        },
}

</script>