当前位置：首页 > JavaScript > 微信小程序上传附件

微信小程序上传附件

一叶知秋2024-08-05 09:29:13JavaScript6

微信小程序上传附件的功能可以通过 wx.chooseImage 和 wx.uploadFile 两个 API 实现。下面是一个简单的示例：

在 wxml 文件中添加一个按钮用于选择图片：

<button bindtap="chooseImage">选择图片</button>

在 js 文件中编写 chooseImage 函数，用于调用微信小程序的 wx.chooseImage API 选择图片：

Page({
  chooseImage: function() {
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function(res) {
        // 返回选定照片的本地文件路径列表，res.tempFilePaths 是一个数组
        console.log(res.tempFilePaths);
      }
    });
  }
});

在 wxml 文件中添加一个上传按钮用于上传图片：

<button bindtap="uploadImage">上传图片</button>

在 js 文件中编写 uploadImage 函数，用于调用微信小程序的 wx.uploadFile API 上传图片：

Page({
  // ...
  uploadImage: function() {
    const uploadTask = wx.uploadFile({
      url: 'https://your-server-url.com/upload', // 你的服务器上传接口地址
      filePath: res.tempFilePaths[0], // 从 chooseImage 的返回结果中获取图片路径
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: function(res) {
        // 上传成功后，res.data 是服务器返回的数据
        console.log(res.data);
      }
    });

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

注意：请将上述代码中的 https://your-server-url.com/upload 替换为你自己的服务器上传接口地址。