wxml文件:
```html
<view class="container">
<button bindtap="chooseImage">选择图片</button>
<image src="{{ imageUrl }}" mode="aspectFit" />
<button bindtap="uploadImage">上传图片</button>
<text>{{ uploadResult }}</text>
</view>
```
js文件:
```javascript
Page({
data: {
imageUrl: '',
uploadResult: ''
},
chooseImage() {
wx.chooseImage({
count: 1,
success: res => {
const imageUrl = res.tempFilePaths[0]
this.setData({
imageUrl
})
}
})
},
uploadImage() {
wx.uploadFile({
url: 'https://example.com/api/upload',
filePath: this.data.imageUrl,
name: 'image',
formData: {
'user': 'test'
},
success: res => {
this.setData({
imageUrl: '',
uploadResult: '上传成功'
})
},
fail: err => {
this.setData({
uploadResult: '上传失败'
})
}
})
}
})
```
在这个示例中,我们使用了小程序的选择图片接口(`wx.chooseImage`)来允许用户选择上传的图片。当用户选择了图片后,我们将其显示在小程序页面上。然后,我们使用小程序的上传文件接口(`wx.uploadFile`)将选定的图片上传到服务器。在这个例子中,服务器的URL为`https://example.com/api/upload`,并且我们将图片和一个表单数据`user`一起发送到服务器。
小程序上传图片后,我们根据服务器返回的结果来处理上传结果,并在小程序页面上显示。在示例中,我们使用了`setData`函数来设置`uploadResult`数据属性,该值将显示在小程序页面上。
这只是一个简单的示例,你可以根据需要扩展这个小程序,例如显示上传进度、上传多个文件等等。