vue+vant移动端上传upload

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;

          }

        })

      },