element ui 手动文件上传带有进度条

#element ui 手动文件上传带有进度条| 来源: 网络整理| 查看: 265

这是一篇学习笔记（我怕过段时间自己忘记怎么做了）有错误的地方请多多指教

一、需要的基础属性

二、属性设置完之后如何上传

三、另外一种简单的方法添加进度条

一、需要的基础属性

先搞懂Upload 上传这一部分的重要属性，vue绑定属性的指令为 v-bind：（简写：）

1、auto-upload

因为我项目的需求是选取文件后，手动上传文件，所以在标签内将此属性改为false（手动上传）

选择文件上传文件

2、action（这个属性就是url）

action属性是必填的，也就是平时使用axios请求里的url，可以把axtion的属性值在data里面赋值

选择文件上传文件

3、headers 同理action

如果在上传文件时需要携带token，那就必须要传headers

选择文件上传文件

4、data

就是axios发送请求时的data，如果在上传文件的同时需要上传表单信息，那表单信息就可以放在data属性里面

选择文件上传文件

5、file-list

给file-list在data里定义一个空的数组，这是装上传的文件的容器

选择文件上传文件

6、limit

选择文件上传文件

注意：以上所有属性的参数，我都是放到data里面的，这样html的代码看起来要清晰一些

// url action: '', // headers headers: { "Authorization": 'Bearer ' + sessionStorage.getItem('token') } // data params: {},

7、accept

我这里限制的上传文件的后缀为dxf格式的，所以就直接就写成 accept=' .dxf '，如果还可以允许上传其他格式的文件，例如png，则直接在参数后面逗号隔开添加 accept=' .dxf,.png ' 。

选择文件上传文件

二、属性设置完之后如何上传

因为前面我添加了属性 :auto-upload='false' 手动上传文件，手动上传的方法在element ui文档里面也写了方法：

给元素绑定ref（ref被用来给元素或子组件注册引用信息，普通的 DOM 元素上使用，引用指向的就是 DOM 元素）使用this.$refs.名字，来拿到元素DOM信息，使用this.$refs.名字.submit() 上传选好的文件列表选择文件上传文件 methods:{ submitUpload(){ this.$refs.upload.submit() }, }

到这个地方，就已经实现了手动文件上传的步骤，但是在实际开发中，我们需要得到上传成功或是失败的结果，况且我们后面还要在上传过程中添加进度条，这是就需要用到钩子函数

选择文件上传文件 //进度条 methods:{ //手动上传按钮 submitUpload(){ this.$refs.upload.submit() }, //上传时 onUpload(event, file, fileList){ //三个参数看情况使用 this.loading = true //使用定时器来制作进度条 this.timer = setInterval(() => { //progressPercent 进度条数字 this.progressPercent++ //这里之所以到72%就结束定时器，下面具体解释 if (this.progressPercent == 72) { clearInterval(this.timer) // 这里必须使用this.timer = null，否则清除定时器无效 this.timer = null } }, 800) }, //上传成功 upoloadSuccess(res, file, fileList){ //三个参数看情况使用 // 清除上传文件列表 this.$refs.upload.clearFiles(); // 必须在上传成功之后进度条继续++ if (res.status == true) { // 创建一个完成后的定时器，会在progressPercent = 72 的基础上继续增加 this.finishtimer = setInterval(() => { if (this.progressPercent < 100) { this.progressPercent++ if (this.progressPercent == 100) { clearInterval(this.finishtimer) this.finishtimer = null //关闭遮罩，进度条归零 this.loading = false this.progressPercent = 0 } } }, 100) } }, //上传失败 upoloadErr(){ }, }

之所以要在progressPercent = 72的时候结束定时器：

progressPercent超过了100会报错在还没有上传成功的时候就直接让progressPercent=100，做进度条就没有意义72这个值可以更具实际情况随便定，完成之后创建的定时器循环的速度可以快一些，用户体验好

三、另外一种简单的方法添加进度条

在上传时 :on-progress="onUpload" 钩子函数返回的event里面也有进度条的数值，但是我试了一下发现还没返回成功结果，进度条就已经加载到100%了，下面代码就是直接使用上传时的钩子函数返回的event的percent参数作为进度条的参数。

methods:{ //手动上传按钮 submitUpload(){ this.$refs.upload.submit() }, //上传时 onUpload(event, file, fileList){ //三个参数看情况使用 this.loading = true this.progressPercent = Math.floor(event.percent); }, //上传成功 upoloadSuccess(res, file, fileList){ //三个参数看情况使用 // 清除上传文件列表 this.$refs.upload.clearFiles(); // 必须在上传成功之后进度条继续++ if (res.status == true) { //关闭遮罩，进度条归零 this.loading = false this.progressPercent = 0 } }, //上传失败 upoloadErr(){ }, }

【本文地址】

公司简介

联系我们