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

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

创新互联公司是一家专业提供惠水企业网站建设,专注与成都网站制作、成都网站设计、外贸营销网站建设H5建站、小程序制作等业务。10年已为惠水众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

前言

前端 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

分享题目:详解Vue如何实现附件上传功能-创新互联
网页地址:http://ybzwz.com/article/ccegeh.html