微信小程序 之 Vant Weapp 组件 uploader文件下载与添加

Vant Weapp 是微信小程序生态下基于 Vue 框架的一个优秀组件库，它提供了一个名为 `uploader` 的组件，用于处理文件上传和下载的功能。对于文件下载，你可以通过 `download` 属性指定一个 URL 来下载远程文件。示例如下：

<van-uploader
  :url="remoteFileUrl" // 这里替换为你要下载的文件URL
  action="saveRemoteFile"
  download
></van-uploader>

<script>
export default {
  data() {
    return {
      remoteFileUrl: 'https://example.com/download/file.jpg', // 下载文件的地址
    };
  },
  methods: {
    saveRemoteFile(response) {
      if (response.status === 200) {
        console.log('下载成功:', response.data);
        // 将下载好的文件保存到本地或其他地方，这里不做详细展示
      } else {
        console.error('下载失败:', response.message);
      }
    },
  },
};
</script>

对于文件添加（上传），你可以使用 `before-upload` 和 `on-success` 或者直接设置 `action` 属性指向服务器端处理文件上传的地方。上传文件前通常会检查文件大小、格式等限制：

<van-uploader
  multiple
  :before-upload="beforeUpload"
  @success="uploadSuccess"
  action="/api/upload"
></van-uploader>

<script>
export default {
  methods: {
    beforeUpload(file) {
      // 文件检查，返回true表示允许上传，false则阻止
      const allowedTypes = ['image/jpeg', 'image/png'];
      if (!allowedTypes.includes(file.type)) {
        wx.showToast({
          title: '只支持图片文件',
        });
        return false;
      }
      if (file.size > 5 * 1024 * 1024) { // 限制文件大小为5MB
        wx.showToast({
          title: '文件过大，请选择小于5MB的图片',
        });
        return false;
      }
      return true;
    },
    uploadSuccess(res) {
      console.log('文件上传成功:', res);
    },
  },
};
</script>