微信小程序分片上传示例

微信小程序分片上传是指将一个大文件拆分为多个小文件进行上传，可以有效地避免上传过程中因为网络不稳定等原因导致传输失败。

以下是一个简单的微信小程序分片上传示例代码：

1. 在 WXML 中添加上传按钮和进度条：

<view class="container">
  <button bindtap="chooseFile">选择文件</button>
  <button bindtap="startUpload">开始上传</button>
  <progress wx:if="{{progress}}" percent="{{progress}}" show-info stroke-width="2" />
</view>

2. 在 JS 中实现选择文件和开始上传的逻辑：

Page({
  data: {
    filePath: '', // 文件路径
    progress: null, // 上传进度，百分比
  },

  chooseFile: function() {
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      success: res => {
        this.setData({
          filePath: res.tempFiles[0].path,
        });
      },
    });
  },

  startUpload: function() {
    const CHUNK_SIZE = 1024 * 1024; // 分片大小，1MB
    const file = this.data.filePath;
    const fileSize = file.size;
    const chunkCount = Math.ceil(fileSize / CHUNK_SIZE); // 分片数量
    let uploadedChunkCount = 0; // 已上传的分片数量

    for (let i = 0; i < chunkCount; i++) {
      const start = i * CHUNK_SIZE;
      const end = Math.min(start + CHUNK_SIZE, fileSize);
      const chunkSize = end - start;
      const chunkData = file.slice(start, end);
      const formData = {
        index: i,
        count: chunkCount,
        size: fileSize,
        chunkSize: chunkSize,
        chunkData: chunkData,
      };

      wx.uploadFile({
        url: 'https://example.com/upload',
        filePath: this.data.filePath,
        formData: formData,
        success: res => {
          uploadedChunkCount++;
          const progress = Math.round((uploadedChunkCount / chunkCount) * 100);
          this.setData({
            progress: progress,
          });
        },
      });
    }
  },
});

在上面的代码中，我们使用 `wx.chooseMessageFile` 接口选择文件，并在 `startUpload` 方法中将文件分成多个小文件进行上传。上传过程中，我们使用 `wx.uploadFile` 接口上传每个小文件，并在成功回调中更新上传进度。需要注意的是，由于微信小程序上传文件接口的限制，我们不能直接将文件分片后一次性上传，而是需要多次调用 `wx.uploadFile` 接口逐个上传每个分片。

以上是一个简单的微信小程序分片上传示例代码。需要注意的是，上传大文件时可能会遇到网络不稳定、服务器响应慢等问题，因此在实际使用中需要进行适当的错误处理和重试机制。