el-upload实现多文件上传并显示进度条
时间: 2023-11-07 08:38:22 浏览: 368
el-upload多文件一次性上传(携带json),自定义上传事件(手动上传),不使用action属性上传.pdf
5星 · 资源好评率100%
好的,我了解了。对于el-upload实现多文件上传并显示进度条,你可以按照以下步骤进行操作:
1. 在你的Vue组件中,引入el-upload组件。
2. 在el-upload组件中设置multiple属性为true,即可实现多文件上传。
3. 配置el-upload组件的before-upload属性,该属性接收一个函数,该函数会在文件上传之前执行。在该函数中,你可以自定义上传参数、上传地址等。同时,你还可以使用Vue的组件实例中的this.$refs来获取上传进度条组件的实例。
4. 上传完成后,你可以使用el-upload组件的on-progress属性来监控上传进度。该属性接收一个函数,该函数会在上传进度发生变化时执行。在该函数中,你可以通过调用刚刚获取的上传进度条组件实例的setPercentage()方法来更新进度条。
5. 上传完成后,你可以使用el-upload组件的on-success属性来处理上传成功的回调。该属性接收一个函数,该函数会在上传成功时执行。在该函数中,你可以获取服务器返回的数据,并进行处理。
以上就是实现el-upload多文件上传并显示进度条的步骤。希望对你有所帮助!
阅读全文