使用巴比达内网穿透开发微信小程序

开发微信应用，需要一个固定的公网访问域名地址，尤其是微信小程序，需要https地址，这里内网穿透我使用的是巴比达内网穿透，因为简单好用。

今天记录一下微信小程序上传文件功能

1. 页面结构（.wxml）

首先，在你的页面中添加一个按钮，用于触发文件选择器。

<button open-type="chooseImage" bindchooseimage="chooseImage">选择图片</button>

2. 选择文件（.js）

接下来，在页面的.js文件中定义一个函数来处理文件选择事件，使用chooseImage API来让用户选择图片。

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

3. 上传文件（.js）

定义一个uploadFile函数来上传选中的文件到服务器。这里以上传图片为例，使用wx.uploadFile接口。

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

  const url = '你的服务器上传接口URL'; // 替换为你的服务器地址
  const formData = {
    'file': filePath,
    // 其他额外的参数
  };

  wx.uploadFile({
    url: url,
    filePath: filePath,
    name: 'file', // 对应服务器接收文件的字段名
    formData: formData,
    success: function(res) {
      wx.hideLoading();
      if (res.statusCode === 200) {
        const data = JSON.parse(res.data);
        console.log('上传成功，服务器返回:', data);
        // 根据实际情况处理上传成功的逻辑
      } else {
        console.error('上传失败', res);
        // 处理上传失败的情况
      }
    },
    fail: function(err) {
      wx.hideLoading();
      console.error('上传失败', err);
    },
  });
},

大功告成