小程序开发如何点击选择图片和上传图片功能

思路

1，首先我们要清楚两个 API  （1）wx.chooseImage()选择图片   （2）wx.uploadFile()上传图片

第一步就是 在点击事件中 加上wx.chooseImage()  当点击时就会触发这个API 打开选择图片的文件夹，当你选完图片后  使用这个API的时候 用个变量 这样就可以看到变量里面所点的图片了

const res = wx.chooseImage()

所以你可以直接 const imgPath = res.tempFilePaths[0] 将图片存储  

2，wx.uploadFile 就是图片上传 它里面有很多属性比如：

url(图片上传的地址)，

filePath(图片的网络地址也就是上面的imgPath )，

name(这个要看后端给的是什么),

header(请求头添加token)--header:{Authorization: `Bearer  ${token存储的地方}`}

success(当正确成功请求后 执行的逻辑)--这里面有着成功后的图片地址  可以拿到图片地址先用

JSON.parse转换成json字符串  然后 拿到对应的图片     

总结:如果想要 点击按钮 让图片回显到对应的框框内 可以给框框内加个 

<image src="{ {idcardBackUrl}}"></image>   这里面的idcardBackUrl 可以设置到 data中   等拿到最终的图片地址后   再渲染到 页面的框框中

案例代码如下

里面的-添加房屋信息 - 上传身份证照片