Uploader file upload

Introduced

import Vue from 'vue';
import { Uploader } from 'vant';

Vue.use(Uploader);

Code demo

Basic usage

When the file is uploaded, theafter-read callback function is triggered to get the corresponding file object

<van-uploader :after-read="afterRead" />

export default {
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    }
  }
};

Picture preview

V-model allows you to bind a list of images that have been uploaded and show a preview of the list of pictures

<van-uploader v-model="fileList" multiple />

export default {
  data() {
    return {
      fileList: [
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: 'https://cloud-image', isImage: true }
      ]
    }
  }
};

Limit the number of uploads

The max-count property allows you to limit the number of uploaded files, and when the number of uploads reaches the limit, the upload area is automatically hidden

<van-uploader
  v-model="fileList"
  multiple
  :max-count="2"
/>

export default {
  data() {
    return {
      fileList: []
    }
  }
};

Custom upload styles

The slot allows you to customize the style of the upload area

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

Check before uploading

By passing in the beforeRead function, you can verify before uploading, return true to indicate check pass, return to false to indicate that the check failed. Supports returning Promise for asynchronous validation

<van-uploader :before-read="beforeRead" />

import { Toast } from 'vant';

export default {
  methods: {
    // 返回布尔值
    beforeRead(file) {
      if (file.type !== 'image/jpeg') {
        Toast('请上传 jpg 格式图片');
        return false;
      }
      return true;
    },
    // 返回 Promise
    asyncBeforeRead(file) {
      return new Promise((resolve, reject) => {
        if (file.type !== 'image/jpeg') {
          Toast('请上传 jpg 格式图片');
          reject();
        } else {
          resolve();
        }
      });
    }
  }
}

Api

Props

Events

Slots

Callback parameters

The following callback parameters are passed when before-read, after-read, before-delete are executed:

ResultType optional value

The result-type field represents the type of file read result, and file type is recommended to avoid Caton when uploading large files.

Method

Ref allows you to get to the Uploader instance and call the instance method, as detailed in The Component Instance Method