微信小程序从本地上传照片并展示出来
时间: 2023-07-13 19:39:38 浏览: 84
在微信小程序中,可以使用`<image>`标签来展示本地上传的照片。具体步骤如下:
1. 在`<input>`标签中设置`type`属性为`file`,用于调起手机的相册或相机:
```
<input type="file" accept="image/*" bindchange="uploadImage" />
```
其中,`accept`属性用于限制上传的文件类型,这里设置为只能上传图片。`bindchange`属性用于绑定选择文件后的回调函数,用于处理选择的文件。
2. 在相册或相机选择或拍摄照片后,会触发`<input>`标签的`change`事件,可以在对应的回调函数中获取选择的图片,并将其展示出来。例如:
```
Page({
data: {
imageUrl: '' // 用于存储图片路径
},
// 选择图片后的回调函数
uploadImage: function (e) {
var that = this
var file = e.detail.tempFiles[0] // 获取选择的图片文件
wx.uploadFile({
url: '服务器地址',
filePath: file.path,
name: 'file',
success: function (res) {
// 上传成功后的处理
that.setData({
imageUrl: res.data // 将图片路径存储到data中
})
}
})
}
})
```
在上述代码中,`wx.uploadFile()`函数用于将选择的图片上传到服务器,其中`url`参数为服务器地址,`filePath`参数为选择的图片文件路径,`name`参数为上传文件的名称。上传成功后,可以在`success`回调函数中将图片路径存储到`data`中。
3. 在`<image>`标签中设置`src`属性,用于展示上传的图片:
```
<image src="{{imageUrl}}" />
```
其中,`{{imageUrl}}`为存储图片路径的变量名,根据具体情况动态赋值即可。