vue+element UI upload 上传组件使用经验分享

用 vue+element UI 框架开发前端项目时，产品功能要求可以上传图像和文件，这就可以用到 el-upload 上传组件。在用此组件实现功能时，从陌生到熟悉，掌握了一些方法，仅以此文做一个总结梳理。 关于 upload 上传 element 的官网就一句话介绍：通过点击或者拖拽上传文件。它的基础代码如下：

我们看 element 官网详细的说明，可以发现 el-upload 的触发事件和属性特别多，action, on-priview, on-remove, before-remove, on-exceed 等大概有二十多个，每个场景都不一样，那我们实际项目中真的会用到这么多的事件吗？我的回答是不用，根据自己的需求来做合适的选择。 本文就结合我自己的实际项目需求来进行说明。代码如下：

我这段代码要实现的是上传图片的功能，所以 list-type 设置为 picture-card，这样文件列表的类型就是图片了，如果不设置，默认就是 text 文件。如果我不做 limit （用来限制上传文件/图片的数量）限制，那么效果如下：

但是在实际应用时，我只需要上传一张图片，所以我这里用了 limit 来限制，这里你会感觉疑惑，为什么代码中设置的 limit 为 2。那是因为如果设置为 1，就没有办法编辑修改了，这样其实是不太友好的。所以我这里设置为 2，然后结合 file-list 和 on-change 来做新旧图片的覆盖。file-list 是上传的文件列表，是一个数组。给它定义一个数组 pictureList。 on-change 是文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用。然后 handleChangePicture 定义如下，当上传文件这个动作执行时，就调用 handleChangePicture 方法，判断 fileList 文件个数如果大于 1 ，就删除第一个文件，这样就实现了图片覆盖的效果。

http-request 是覆盖默认的上传行为，可以自定义上传的实现。我们可以用这个来调用 api 接口，实现与后端的交互，这样就实现图片的上传了。关于图片预览钩子 on-preview，我这里就没有用到，直接用了 el-image 组件自带的 preview-src-list 属性，file 是上传文件默认的字段名，获取文件路径使用 file.url ，点击图片就可以直接预览原图，也比较方便。

同理，上传文件时基本上也是这样应用的，代码如下：区别就是默认 list-type 为文件。

页面效果如下：

另外这里我还用到了 on-remove 钩子，是文件列表移除文件时的钩子。项目要求是图片必须要有，附档可以为空，所以这里增加了这样一个钩子，在删除文件时调用 handleRemove 方法，清空文件参数，同时按钮文字也根据参数清空而改变，这里做一个 v-if 判断就可以。

有的时候上传文件会限制文件格式，这个时候我们可以使用 accept 属性。参考代码如下：

设置 accept 属性为 .xls,xlsx, 就意味着上传文件只能是 Excel 文件。如果是 PDF 文件，就设置为 .pdf, 如果是 Word 文件，就设置 .doc, .docx 等等以此类推，页面效果如下：

当然如果上传文件还有大小要求，就需要用到 before-upload 钩子，在上传文件之前调用，来判断文件大小是否超出限制，超出就中断上传。代码如下：

同时也可以判断文件格式是否满足要求，实现一个双保险。

前文我们提到 http-request 可以与服务器进行交互，这个是在文件上传之后就直接调用。但是如果不自动交互的情况，就要对 headers, action, auto-upload 这三个属性进行设置，headers 设置上传的请求头部，action 必选参数，设置上传的地址。auto-upload 设定是否在选取文件后立即进行上传，默认是 true，这里要设置为 false。所以是选择 http-request 还是 headers + action 的方式都是可以的，就根据自己的应用场景来选择。

Upload 上传组件中的其它的钩子和属性，我这里就不做赘述，应用场景都比较容易明白，可以直接参考官网的说明。本文的内容就介绍到这里，希望可以帮助到有同样需求的网友。