使用微信小程序写一个用van-uploader在手机相册中上传5个图片和视频的详细案例

好的，下面是一个简单的用van-uploader在微信小程序中上传5个图片和视频的案例：

1. 在微信开发者工具中创建一个新的小程序项目。
2. 在app.json文件中添加以下代码：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "上传图片和视频"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "上传"
    }]
  }
}

3. 创建一个名为index的页面，在index.json中添加以下代码：

{
  "usingComponents": {
    "van-uploader": "/miniprogram_npm/vant-weapp/dist/uploader/index"
  }
}

4. 在index.wxml文件中添加以下代码：

<view class="container">
  <van-uploader
    upload-text="上传图片或视频"
    max-count="5"
    type="image"
    bind:after-read="onAfterRead"
  />
</view>

5. 在index.js文件中添加以下代码：

Page({
  data: {
    files: []
  },

  onAfterRead(event) {
    const { file } = event.detail;
    const files = this.data.files.concat(file);
    this.setData({ files });
  },

  upload() {
    const { files } = this.data;
    if (!files.length) {
      wx.showToast({
        title: '请选择文件',
        icon: 'none'
      });
      return;
    }
    files.forEach((file, index) => {
      wx.uploadFile({
        url: 'http://localhost:3000/upload',
        filePath: file.path,
        name: 'file',
        formData: {
          index
        },
        success: (res) => {
          console.log('上传成功', res);
        },
        fail: (err) => {
          console.log('上传失败', err);
        }
      })
    });
    this.setData({ files: [] });
  }
})

6. 在微信开发者工具中运行此小程序，选择相册中的五个图片和视频文件，点击上传按钮，上传成功后可以在控制台中看到上传的结果。

注意：在小程序的开发过程中，需要注意小程序的文件上传接口和服务器的文件上传接口需要保持一致，并且需要对上传的文件大小进行限制，避免上传过大的文件，影响用户体验。