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

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

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

vue+vant 表单提交,实现图片上传_第1张图片

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

vue+vant 表单提交,实现图片上传_第2张图片

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

vue+vant 表单提交,实现图片上传_第3张图片

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

vue+vant 表单提交,实现图片上传_第4张图片

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

vue+vant 表单提交,实现图片上传_第5张图片

这什么鬼?是不是一脸蒙蔽呢,下面我来解释下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"))

vue+vant 表单提交,实现图片上传_第6张图片

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

 

你可能感兴趣的:(vue)