微信小程序中点击图片消失并且在原来的位置上传图片
时间: 2023-11-28 20:49:47 浏览: 54
可以通过以下步骤实现:
1. 在小程序中,使用 `<image>` 标签展示图片,并且给图片绑定一个点击事件;
2. 在点击事件中,先隐藏当前图片,然后调用小程序的 `wx.chooseImage()` 接口选择图片;
3. 选择完图片后,将选择的图片上传到服务器,并且在上传成功后将图片展示在之前隐藏的图片的位置上。
下面是一个示例代码,供参考:
```html
<!-- wxml -->
<view>
<image src="{{imgUrl}}" mode="aspectFill" bindtap="chooseImage"></image>
</view>
```
```js
// js
Page({
data: {
imgUrl: ''
},
chooseImage() {
wx.chooseImage({
success: (res) => {
const tempFilePaths = res.tempFilePaths[0]
// 在这里上传图片到服务器
// 如果上传成功,将图片的 url 更新到 data 中
this.setData({
imgUrl: tempFilePaths
})
}
})
}
})
```
需要注意的是,这里的上传图片到服务器和展示在原来位置上需要根据实际情况进行处理,上述代码只是一个简单的示例。