Uploader 文件上传

引入

在或index.json中引入组件，默认为ES6版本，ES5引入方式参见。

基础用法

文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，然后再使用wx.uploadFile将图片上传到远程服务器上。

  1. <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />
  1. Page({
  2.   data: {
  3.     fileList: [],
  4.   },
  6.   afterRead(event) {
  7.     const { file } = event.detail;
  8.     // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  9.     wx.uploadFile({
  10.       url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
  11.       filePath: file.url,
  12.       name: 'file',
  13.       formData: { user: 'test' },
  14.         // 上传完成需要更新 fileList
  15.         const { fileList = [] } = this.data;
  16.         fileList.push({ ...file, url: res.data });
  17.         this.setData({ fileList });
  18.       },
  19.     });
  20.   },
  21. });

图片预览

  1. <van-uploader file-list="{{ fileList }}" />

通过deletable属性可控制是否开启所有图片的可删除状态，deletable默认为true，即所有图片都可删除。

若希望控制单张图片的可删除状态，可将deletable属性设置为true，并在fileList中为每一项设置deletable属性。

  1. <van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />
  1. Page({
  2.   data: {
  3.     fileList: [
  4.       {
  5.         url: 'https://img.yzcdn.cn/vant/leaf.jpg',
  6.       },
  7.       {
  8.         url: 'https://img.yzcdn.cn/vant/tree.jpg',
  9.         deletable: false,
  10.       },
  11.     ],
  12.   },
  13. });

上传状态

通过status属性可以标识上传状态，uploading表示上传中，failed表示上传失败，表示上传完成。

  1. <van-uploader file-list="{{ fileList }}" />

限制上传数量

  1. <van-uploader
  2.   file-list="{{ fileList }}"
  3.   max-count="2"
  4.   bind:after-read="afterRead"
  5. />

自定义上传样式

通过插槽可以自定义上传区域的样式。

  1. <van-uploader>
  2.   <van-button icon="photo" type="primary">上传图片</van-button>
  3. </van-uploader>

将use-before-read属性设置为true，然后绑定 before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。

  1.   file-list="{{ fileList }}"
  2.   accept="media"
  3.   use-before-read
  4.   bind:before-read="beforeRead"
  5.   bind:after-read="afterRead"
  6. />

上传图片至云存储

在开发中，可以利用小程序云开发的云存储能力，将图片上传至云存储内。然后根据返回的fileiId来下载图片、删除图片和替换临时链接。

  1. // 上传图片
  2. uploadToCloud() { 
  3.   wx.cloud.init();
  4.   const { fileList } = this.data;
  5.   if (!fileList.length) {
  6.     wx.showToast({ title: '请选择图片', icon: 'none' });
  7.   } else {
  8.     const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));
  9.     Promise.all(uploadTasks)
  10.       .then(data => {
  11.         wx.showToast({ title: '上传成功', icon: 'none' });
  12.         const newFileList = data.map(item => { url: item.fileID });
  13.         this.setData({ cloudPath: data, fileList: newFileList });
  14.       })
  15.       .catch(e => {
  16.         wx.showToast({ title: '上传失败', icon: 'none' });
  17.         console.log(e);
  18.       });
  19.   }
  20. }
  22. uploadFilePromise(fileName, chooseResult) {
  23.   return wx.cloud.uploadFile({
  24.     cloudPath: fileName,
  25.     filePath: chooseResult.url
  26.   });

Props

accept 的合法值

FileList

Event