微信小程序上传base64图片，写一下wxml和js

微信小程序中，你可以通过WXML（微信小程序的模板语言）处理HTML结构，并在JS文件中进行数据绑定和事件处理。上传Base64编码的图片通常涉及以下几个步骤：

**WXML (页面.wxml)**

<!-- 页面结构 -->
<view class="image-container">
  <button bindtap="uploadImage">上传图片</button>
  <image src="{{ imageUrl }}" placeholder="默认图片" mode="widthFix"></image> <!-- 显示已选图片 -->
</view>

在这个部分，我们创建了一个按钮用于触发上传操作，以及一个`image`标签显示选择的图片。`src={{ imageUrl }}`用于动态绑定图片URL。

**JS (pages/index.js)**

Page({
  data: {
    imageUrl: '', // 存储Base64图片
  },
  
  uploadImage: function(e) { 
    const input = wx.createSelectorQuery().select('#picker-image'); // 获取input元素
    input.select();
    input.invoke('getBase64', { success: function(res) {
      let base64Str = res.tempFilePath; // 获得Base64字符串
      if (base64Str) {
        this.setData({ imageUrl: 'data:image/jpeg;base64,' + base64Str }); // 设置图片源
      }
    }.bind(this), fail: function(err) {
      console.error('获取Base64失败:', err);
    }});
  },
});

在这个JS文件中，我们定义了页面的数据属性`imageUrl`并绑定了`uploadImage`函数。当用户点击上传按钮，会触发`invoke('getBase64')`从用户选择的图片中获取Base64编码，然后将其设置到`imageUrl`上。