详解Vue如何实现附件上传功能-创新互联

这篇文章主要详解Vue如何实现附件上传功能，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

前言

前端 UI 是用的是 element-ui 的上传功能

本文主要记录下代码，方便下次复制粘贴

前端部分

HTML

• limit： 限制文件个数 1 个
• on-remove： 移除附件时的钩子函数，主要就 console 输出下
• on-error： 用于处理上传异常后的处理，本人这主要用来关闭弹窗和全屏等待
• file-list： 绑定附件
• auto-upload： 禁止自动上传，true 的话选了文件就自动上传
• http-request： 自定义上传文件请求方法，默认方法会与 mock 产生 XmlRequest 重新生成导致找不到文件问题，我注释了 mock 还是那样，没具体研究
• action： 原上传文件的路径，由于使用了自定义上传文件请求，即 http-request，因此这个字段随便写就好，不写不行好像
   

 选取文件
 
 
支持上传 {{ strRebuild(fileType) }} 格式，且不超过 {{ fileSize }}M