微信小程序开发中的图片选择与上传

图片选择与上传是微信小程序开发中常见的功能之一。在本文中，我将为您提供一个详细的代码案例，以引导您如何实现图片选择与上传功能。

1. 创建一个新的微信小程序项目，并打开微信开发者工具。

2. 在项目的根目录下创建一个新的页面，命名为“image-upload”。

3. 在“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标签。

1. 在“image-upload”页面的wxss文件中添加以下代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  margin-bottom: 20px;
}

这段代码用于设置容器和按钮的样式。

1. 在“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"属性替换为您实际的上传接口地址。

1. 在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属性中。

1. 运行微信开发者工具，预览并测试该功能。您将看到一个页面，点击“选择图片”按钮后，会弹出图片选择器，选择一张图片后，图片会显示在页面上，然后点击“上传图片”按钮，图片将被上传到指定的接口地址。

这就是一个简单的微信小程序中图片选择与上传的实现。您可以根据自己的需求进行进一步的功能优化和扩展。