图片选择与上传是微信小程序开发中常见的功能之一。在本文中,我将为您提供一个详细的代码案例,以引导您如何实现图片选择与上传功能。
-
创建一个新的微信小程序项目,并打开微信开发者工具。
-
在项目的根目录下创建一个新的页面,命名为“image-upload”。
-
在“image-upload”页面的wxml文件中添加以下代码:
<view class="container">
<button bindtap="chooseImage">选择图片</button>
<image wx:if="{{imageSrc}}" src="{{imageSrc}}" mode="aspectFit"></image>
<button wx:if="{{imageSrc}}" bindtap="uploadImage">上传图片</button>
</view>
在这段代码中,我们创建了一个容器,里面包含了“选择图片”和“上传图片”两个按钮,以及一个用于显示已选择图片的image标签。
- 在“image-upload”页面的wxss文件中添加以下代码:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
button {
margin-bottom: 20px;
}
这段代码用于设置容器和按钮的样式。
- 在“image-upload”页面的js文件中添加以下代码:
Page({
data: {
imageSrc: ""
},
chooseImage: function() {
var that = this;
wx.chooseImage({
count: 1,
success: function(res) {
that.setData({
imageSrc: res.tempFilePaths[0]
});
}
});
},
uploadImage: function() {
var that = this;
wx.uploadFile({
url: "https://api.example.com/upload", // 替换成实际的上传接口地址
filePath: that.data.imageSrc,
name: "image",
success: function(res) {
wx.showToast({
title: "上传成功",
icon: "success"
});
},
fail: function(res) {
wx.showToast({
title: "上传失败",
icon: "none"
});
}
});
}
});
在这段代码中,我们定义了一个名为“imageSrc”的data属性,用于存储选择的图片的临时文件路径。在chooseImage函数中,我们调用了微信的chooseImage接口,选择了一张图片,并将其临时文件路径保存到data属性中。在uploadImage函数中,我们调用了微信的uploadFile接口,将选择的图片上传到指定的接口地址。
请注意,您需要将"url"属性替换为您实际的上传接口地址。
- 在app.json文件中注册“image-upload”页面:
{
"pages": [
"pages/index/index",
"pages/image-upload/image-upload"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
在这段代码中,我们将“image-upload”页面注册到了app.json文件的pages属性中。
- 运行微信开发者工具,预览并测试该功能。您将看到一个页面,点击“选择图片”按钮后,会弹出图片选择器,选择一张图片后,图片会显示在页面上,然后点击“上传图片”按钮,图片将被上传到指定的接口地址。
这就是一个简单的微信小程序中图片选择与上传的实现。您可以根据自己的需求进行进一步的功能优化和扩展。