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

VUE elementUI 表单上传在项目开发需求中基于VUE + elementUI在表单实现多张图片和Excel文件上传的需求。1.图片上传模板:action，必选参数，上传的地址，String类型。:accept 文件上传类型drag是否启用拖拽，:limit文件或者图片数量限制multiple是否支持多选文件2、常用方法介绍1、在实现自定义上传的:auto-up...

刘家小五

7794人浏览 · 2020-05-02 12:01:20

刘家小五 · 2020-05-02 12:01:20 发布

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中需要的参数
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^