1、首先下载依赖
# Vue 2 项目,安装 Vant 2.x 版本: npm i vant -S
# Vue 3 项目,安装 Vant 3.x 版本: npm i vant@next -S
2、全局或者自己局部引用
(依据自己需求而定)
3、这里使用局部引入组件
import { Uploader } from 'vant';
<template>
//直接使用
<van-uploader :after-read="afterRead" />
//在表单中使用
<van-field name="uploader" label="上传清单">
<template #input>
<van-uploader v-model="uploader" :after-read="onRead" :max-count="1"/>
</template>
</van-field>
</template>
其中after-read是上传回调方法
onRead(file){//上传清单
var formDate = new FormData();
formDate.append('file',file.file);
this.newForm.FileName = file.file.name//保存上传文件名
//通过接口上传文件,并返回文件地址,其中BASE_URL是服务器地址 'file/upload'是上传文件接口
this.$http.post(BASE_URL+'file/upload',formDate).then(data=>{
if(data.code==0){
this.newForm.FileUrl = data.data.Url;
}
})
},