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

 

  • 7
    点赞
  • 34
    收藏
  • 打赏
    打赏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术工厂 设计师:CSDN官方博客 返回首页
评论 11

打赏作者

烎烎~

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值