vue 使用 vant上传图片

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

实例：

 
原文链接：https://blog.csdn.net/onlyhqm/article/details/85250216