这是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传给后端就大功告成了

 

Logo

前往低代码交流专区

更多推荐