微信小程序之上传图片，使用巴比达内网穿透

很多人在本地开发微信支付或者微信小程序，由于需要公网域名地址进行回调，没办法只能使用内网穿透工具，我这里使用的是免费的巴比达内网穿透。

在微信小程序中上传图片通常涉及使用wx.chooseImage选择图片，然后使用wx.uploadFile将图片上传到服务器。以下是一个简单的示例代码，展示了这一过程：

1. 选择图片

首先，你需要在小程序页面的JS文件中定义一个函数，用于让用户选择图片：

chooseImage: function() {
  wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: (res) => {
      // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths = res.tempFilePaths;
      this.uploadImage(tempFilePaths[0]);
    }
  });
},

2. 上传图片至服务器

接着，定义一个uploadImage函数来上传选中的图片到服务器。这里以POST方法为例，使用wx.uploadFile完成上传：

uploadImage: function(filePath) {
  wx.showLoading({
    title: '上传中...',
  });

  const uploadTask = wx.uploadFile({
    url: 'http://your-babida-public-url/api/upload', // 巴比达映射后的公网URL
    filePath: filePath,
    name: 'image', // 对应服务器接收图片字段名
    formData: {
      // 其他额外参数，如用户标识等
      'user': 'test_user'
    },
    success: (res) => {
      wx.hideLoading();
      if (res.statusCode === 200) {
        const data = JSON.parse(res.data);
        console.log('图片上传成功', data);
        // 根据返回结果处理，例如提示用户或更新页面状态
      } else {
        wx.showToast({
          icon: 'none',
          title: '上传失败',
        });
      }
    },
    fail: (err) => {
      wx.hideLoading();
      wx.showToast({
        icon: 'none',
        title: '上传失败，请重试',
      });
      console.error('图片上传失败', err);
    }
  });

  // 监听上传进度
  uploadTask.onProgressUpdate((res) => {
    console.log('上传进度', res.progress);
    console.log('已经上传的数据长度', res.totalBytesSent);
    console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
  });
},

这段代码中，wx.chooseImage用于弹出选择图片的对话框，用户可以选择一张图片。然后，通过wx.uploadFile将选中的图片上传到指定的服务器地址。注意，你需要将URL替换为你通过巴比达映射得到的公网URL，并根据你的服务器接口要求调整name和formData的内容。