Uploader 图片上传

使用指南

  1. import { Uploader } from 'vant';
  2. Vue.use(Uploader);

代码演示

基础用法

  1. <van-uploader :after-read="onRead">
  2. <van-icon name="photograph" />
  3. </van-uploader>
  1. export default {
  2. methods: {
  3. onRead(file) {
  4. console.log(file)
  5. }
  6. }
  7. };

设置 Input 属性

可以直接在 Uploader 上设置 accpet、multiple 等原生属性,input 会自动继承该属性

  1. <van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
  2. <van-icon name="photograph" />
  3. </van-uploader>

API

参数说明类型默认值版本
result-type文件读取结果类型,可选值为 textStringdataUrl-
accept接受的文件类型Stringimage/*-
disabled是否禁用图片上传Booleanfalse-
before-read读取前的回调函数,返回 false 可终止文件读取Function--
after-read读取完成后的回调函数Function--
max-size文件大小限制,单位为 byteNumber--

Event

事件名说明参数
oversize文件大小超过限制时触发同 after-read

Slot

名称说明
-自定义 uploader 内容

after-read 回调参数

参数名说明类型
file文件解析后的 file 对象Object
content文件内容String

原文: https://youzan.github.io/vant/#/zh-CN/uploader