vue项目中实现多文件上传功能实例代码

在vue项目中使用elementui 的 upload 上传组件,完成多个文件一次上传

一、效果图:

1.选择上传的文件:

待上传文件

2、上传完成:

已上传文件

3、删除文件:

vue项目中实现多文件上传功能实例代码_第1张图片

二、主要的代码实现

注意处理列表中已上传文件何待上传文件,两者其实有区分的标志。我们可以在控制台中输出选择上传的文件列表,查看每个文件的代码信息,观察可以发现,如果是已上传的文件,则文件的状态status=“success”,如果是待上传文件,那么文件的状态status=“ready”。我们可以通过文件的状态来处理已上传至服务器和待上传至服务器的文件。

主要代码如下:


总结

到此这篇关于vue项目中实现多文件上传功能的文章就介绍到这了,更多相关vue多文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue项目中实现多文件上传功能实例代码)