微信小程序 可以选择照片或者拍照添加图片的图片框
时间: 2023-10-09 14:14:37 浏览: 65
可以使用小程序内置的组件"image-picker"来实现选择照片或拍照添加图片的功能,示例代码如下:
```html
<view class="image-box">
<view class="image-list">
<image wx:for="{{images}}" wx:key="{{item}}" src="{{item}}" mode="aspectFill"></image>
</view>
<view class="add-image" bindtap="chooseImage">
<image src="/images/add.png"></image>
</view>
</view>
```
```javascript
Page({
data: {
images: []
},
chooseImage: function() {
wx.chooseImage({
count: 1, // 最多可选择的图片张数
sizeType: ['original', 'compressed'], // 可以指定原图或压缩图
sourceType: ['album', 'camera'], // 可以指定从相册选图或者拍照
success: (res) => {
// tempFilePaths为选择的图片的临时文件路径列表
const tempFilePaths = res.tempFilePaths
this.setData({
images: this.data.images.concat(tempFilePaths)
})
}
})
}
})
```
其中,"image-picker"组件的使用需要在页面json文件中引入组件:
```json
{
"usingComponents": {
"image-picker": "/path/to/image-picker"
}
}
```