vant步进器传值_Vant Uploader 文件上传

Vant Uploader 文件上传

Vant Uploader 文件上传组建主要实现手机端上传文件功能。

引入import Vue from 'vue';

import { Uploader } from 'vant';

Vue.use(Uploader);

基础用法

文件上传完毕后会触发after-read回调函数，获取到对应的file对象export default {

methods: {

afterRead(file) {

// 此时可以自行将文件上传至服务器

console.log(file);

}

}

};

图片预览

通过v-model可以绑定已经上传的图片列表，并展示图片列表的预览图export default {

data() {

return {

fileList: [

{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },

// Uploader 根据文件后缀来判断是否为图片文件

// 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明

{ url: 'https://cloud-image', isImage: true }

]

}

}

};

限制上传数量

通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域

v-model="