vue.js 前端 javascript elementUI+el-upload 上传、下载、删除文件以及文件展示列表自定义为表格展示

Upload 上传组件的使用

官方文档链接使用el-upload组件上传文件

具体参数说明，如何实现上传、下载、删除等功能获取文件列表进行file-list格式匹配代码 文件展示列表自定义为表格展示

使用的具体参数说明文件大小展示问题（KB/MB）文件下载代码 上传文件大小与文件类型校验

官方文档链接

官方文档 https://element.eleme.cn/#/zh-CN/component/upload

使用el-upload组件上传文件

具体参数说明，如何实现上传、下载、删除等功能

action:文件上传地址，我的项目里已经封装好了请求。使用的时候需要依据项目填写。 show-file-list： 是否显示已上传文件列表。 headers：设置上传的请求头部。我的项目需要传token。 on-preview：点击文件列表中已上传的文件时的钩子。 可以在这个这个回调方法里写下载功能部分代码，实现点击文件下载功能。 on-remove：文件列表移除文件时的钩子。 在文件列表回显时，使用数组fileData记录id列，执行删除回调时，匹配id，因为删除回调方法返回的file中不记录id,只记录url,可通过url相同返回id,再调用删除接口。 on-success： function(response, file, fileList) 文件上传成功时的钩子。 如果不设置auto-upload：false ，则选取文件后立即进行上传，成功回调后使用返回的参数调用接口，完成文件上传。

获取文件列表进行file-list格式匹配

file-list ：上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]列表回显时，需要将返回列表对应参数赋值给file-list对应的数组fileData 。

代码

文件展示列表自定义为表格展示

使用的具体参数说明

show-file-list： 是否显示已上传文件列表。 展示自定义表格样式需要设置show-file-list=“false”on-success： function(response, file, fileList) 文件上传成功时的钩子。 如果不设置auto-upload：false ，则选取文件后立即进行上传，成功回调后使用返回的参数调用接口，完成文件上传。

文件大小展示问题（KB/MB）

上传文件时size默认传file返回的size大小(默认为1字节)，在表格展示时进行判断，如果大于1MB展示单位为MB，小于1MB展示单位KB。MB:size / 1024 / 1024KB:size / 1024 （既然提到字节，可能有的人不熟悉字节，这里顺便记录一下字节转换关系） 字节也叫Byte，是计算机数据的基本存储单位。 8bit(位)=1Byte(字节) 1024Byte(字节)=1KB 1024KB=1MB 1024MB=1GB 1024GB=1TB 其中：K是千 M是兆 G是吉咖 T是太拉。

文件下载

点击下载按钮，实现下载此文件。使用a标签，传入对应文件name和url。具体代码下面记录。

代码

上传文件大小与文件类型校验

可以在beforeUpload方法中进行过滤。使用accept参数：

我自己的项目里暂时没有限制，后续有需求的话会进行更新。这里不做过多概述。 下面po官网代码：

class="avatar-uploader"

action="https://jsonplaceholder.typicode.com/posts/"

:show-file-list="false"

:on-success="handleAvatarSuccess"

:before-upload="beforeAvatarUpload">

差不多使用到的就这些啦，如果有新需求会继续记录。

推荐阅读