vue+ elmentUI实现form表单中文件、图片的上传

VUE elementUI 表单上传
在项目开发需求中基于VUE + elementUI在表单实现多张图片和Excel文件上传的需求。
1.图片上传模板
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

:action,必选参数,上传的地址,String类型。
:accept 文件上传类型
drag是否启用拖拽,
:limit文件或者图片数量限制
multiple	是否支持多选文件

2、常用方法介绍
1、在实现自定义上传的:auto-upload设为"false"时before-upload将会无效,此时如要验证文件类型或者大小此处使用on-change的方法,在on-change方法中判断图片类型、大小,如果符合要求加入到pthotoLists中,不符合则移除
在这里插入图片描述
2、表单点击提交进行验证以及文件自定义上传将文件通过参数传递
在这里插入图片描述
在这里插入图片描述
1、在表单验证通过后开始进行文件的提交,通过自定义的实现方式:http-request="upLoadFIle“”
2、在插入文件前先将表单进行formData()其作用有两点
1、将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。
在这里插入图片描述

2、异步上传文件

3、通过append方法进行添加文件和数据
在这里插入图片描述

4、pPostFile为接口提交方式相当于axios
action为 提交的地址(接口名称)
formDataObj为表单中提交的所有参数(内容)
hearder即为header中需要的参数
在这里插入图片描述

  • 7
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值