vue+vant 表单提交,实现图片上传

这是2018年最后一个周二了,这个周二有点淡淡的忧伤,于是和我往常一样听着歌敲着代码,于是乎,遇到了一个问题,图片上传的,虽然之前用mpvue开发小程序的时候做过一样的,但是后来时间久了,忘记了,今天再走一遍,下面我简洁的写下流程

1.下面这个页面效果图,图片是在网上随便找的一张

2.这个是页面的部分代码,用的是有赞团队的  vant框架

3.然后重点来了,看屏幕,我现在要点击“保存”提交表单,但是提交图片的方式我们可以把图片转为base64进行提交,如果后端接收的时候是base64,瞬间感觉萌萌哒,因为vant中的“Uploader ”这个组件有上传图片的功能

如果后端采用的是表单提交,那么我们需要用到FormData()  这个对象进行拼接数据,

然后我们看似创建对象完成,准备console.log(formData)的时候你会发现一下情况

这什么鬼?是不是一脸蒙蔽呢,下面我来解释下formData的操作方法

1、通过get(key)与getAll(key)来获取相对应的值

2、通过append(key,value)在数据末尾追加数据

3、通过set(key, value)来设置修改数据(key的值不存在,会添加一条数据;key的值存在,会修改对应的value值)

4、通过has(key)来判断是否存在对应的key值

5、通过delete(key)可以删除数据

所以我们查看formData中的某一条数据的时候可以用这个方法console.log(formData.get("avatarFile"))

这样我们就取到了formData中对应的数据了,然后把这个formData作为一个data传给后端就大功告成了

 

Vue2和Vant2都提供了一些常用的表单验证方法,可以轻松地实现表单提交前的验证。以下是一个简单的示例,展示如何使用Vue2和Vant2来实现表单提交前的验证: 1. 在Vue组件中定义表单数据和验证规则: ``` data() { return { formData: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '用户名长度为3-10个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' } ] } } } ``` 2. 在Vue模板中绑定表单数据和验证规则,并使用Vant2组件渲染表单元素: ``` <van-form v-model="formData" :rules="rules" > <van-field v-model="formData.username" name="username" label="用户名" placeholder="请输入用户名" autocomplete="off" clearable /> <van-field v-model="formData.password" name="password" label="密码" placeholder="请输入密码" type="password" autocomplete="off" clearable /> </van-form> ``` 3. 在Vue组件中定义表单提交方法,并在该方法中调用Vant2的`validate`方法进行表单验证: ``` methods: { onSubmit() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过,执行表单提交操作 // ... } else { // 表单验证不通过,给出提示信息 Toast('请填写正确的信息') } }) } } ``` 以上就是一个简单的Vue2 + Vant2表单提交验证的示例。需要注意的是,Vant2的`<van-form>`组件和`<van-field>`组件都提供了大量的属性和事件,可以根据实际需求进行灵活配置和使用。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值