上传图片-微信小程序(那些年的坑记录2022.4)

今天被问到一个问题,怎么上传图片,问这个之前呢,我是在说vue项目的,elementui不是封装好了一堆插件吗,直接用就好了0_0
我只用过微信小程序自带的API,原理应该差不多
比如说一个发布上线的小程序,上传图片该怎么上传

逻辑:

A先生要发布租房信息,需要上传一张图片,首先要选择图片,选择图片之后,保存图片信息
选择上传图片后,把图片上传到云存储中,会返回云存储的图片使用链接
再把链接地址,通过数据接口存放在数据库,那样数据存储成功
B先生查询房屋信息,遍历数据接口数据,渲染出房屋信息,就可以看到A先生发布的租房图片

实现:

1、选择图片的API,拿到图片
wx.chooseImage(Object object)
或者
wx.chooseMedia(Object object)
上传图片-微信小程序(那些年的坑记录2022.4)_第1张图片
2、发布信息前,上传图片,拿到链接地址
上传图片-微信小程序(那些年的坑记录2022.4)_第2张图片
上传图片-微信小程序(那些年的坑记录2022.4)_第3张图片
3、拿到链接地址就好办了,直接存起来就好了

这里遇到一个坑,就是上传到云存储是异步操作,如果和上传数据库放在一起,好像就是先执行数据库后在执行云存储,这样的话就存空图片数据了,所以建议分开写,先把图片上传后,再触发上传数据库

你可能感兴趣的:(前端,微信小程序,vue.js,小程序)