vue+element UI + axios封装文件上传及进度条组件 （转）

阅读目录

• 1.前言
• 2.文件上传
• 3.进度条
• 4.全部代码
• 5.效果演示

 

---

1.前言

之前在做项目的时候，需要实现一个文件上传组件并且需要有文件上传进度条，现将之前的实现过程简单记录一下，希望可以帮助到有需要的人。

项目用的是Vue框架，UI库使用的是element UI，前后端交互请求使用的是Vue官方推荐的axios。其中，UI方面主要使用了element UI库中的Upload文件上传组件、Progress 进度条组件。

回到顶部

2.文件上传

文件上传功能使用element UI库中的Upload文件上传组件实现，代码如下：

      
        
        
将文件拖到此处，或点击选择文件
      
      上传
    

当点击上传按钮，会触发submitUpload函数，同时该函数也会触发beforeUpload函数：

beforeUpload(file){
            let fd = new FormData();
            fd.append('file', file);
            let config = {
              onUploadProgress: progressEvent => {
                let complete = (progressEvent.loaded / progressEvent.total ).toFixed(2) * 100 ;
                this.percentage = complete;
                if (this.percentage >= 100){
                  this.dialogVisible = true
                }
              },
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            };
            this.$axios.post(this.url,fd,config)
              .then((res)=>{

              })
              .catch((err)=>{

              })
          },
          submitUpload(){
            this.loading = true;
            this.tips = '正在上传中。。。';
            this.$refs.upload.submit();
          },

回到顶部

3.进度条

当点击上传后，整个页面被遮罩层遮挡，并显示上传进度：

    

      
{{tips}}
      
      
    

进度条关键代码：

进度条的实现主要依靠axios中提供的onUploadProgress函数，该函数提供了文件已上传部分的大小progressEvent.loaded和文件总大小progressEvent.total，利用这两个数据我们就可以计算出已经上传文件的进度。

beforeUpload(file){
            let fd = new FormData();
            fd.append('file', file);
            let config = {
              onUploadProgress: progressEvent => {
                //progressEvent.loaded:已上传文件大小
                //progressEvent.total:被上传文件的总大小
                let complete = (progressEvent.loaded / progressEvent.total ).toFixed(2) * 100 ;
                this.percentage = complete;
                if (this.percentage >= 100){
                  this.dialogVisible = true
                }
              },
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            };
            this.$axios.post(this.url,fd,config)
              .then((res)=>{

              })
              .catch((err)=>{

              })
          },

回到顶部

4.全部代码

封装好组件后，我们只需在父组件中调用该组件并传入文件上传到的目的url即可。

以下是该组件UploadFile.vue的全部代码：

回到顶部

5.效果演示

主要说明原理，UI就自行发挥吧。

 

免责声明

• 本博客所有文章仅用于学习、研究和交流目的，欢迎非商业性质转载。

原为链接：https://www.cnblogs.com/wangjiachen666/p/9700730.html