Vant Uploader实现上传一张或多张图片组件

<template>  <div class="contWrap">    <van-uploader      v-model="fileList"      :multiple="true"      :before-read="beforeRead"      :after-read="afterRead"      :before-delete="delUploadImg"      upload-icon="plus"    >    <!-- 注：这里是自定义上传样式 -->      <!-- <p>        <van-icon          name="plus"          color="#07c160"          size=".5rem"        />        上传照片      </p> -->    </van-uploader>  </div></template>

<script>import axios from "axios";export default {  name: "uploadImages",  data() {    return {      fileList: [],      uploadUrl: "/api/upload/fileUpload",      headers: {        token: this.$store.state.account.token,      },    };  },  methods: {    // 返回布尔值    beforeRead(file) {      if (file instanceof Array) {        //判断是否是数组        file.forEach((v) => {          this.checkFile(v);        });      } else {        this.checkFile(file);      }      return true;    },    //图片类型检查    checkFile(file) {      const format = ["jpg", "png", "jpeg"];      const index = file.name.lastIndexOf(".");      const finalName = file.name.substr(index + 1);      if (!format.includes(finalName.toLowerCase())) {        Toast("请上传" + format.join(",") + "格式图片");        return false;      }    },    afterRead(file) {    // 此时可以自行将文件上传至服务器      if (file instanceof Array) {        file.map((v) => {          v.status = "uploading";          v.message = "上传中...";          this.uploadImg(v);        });      } else {        file.status = "uploading";        file.message = "上传中...";        this.uploadImg(file);      }    },    //上传    uploadImg(file) {      const formData = new FormData();      formData.append("file", file.file);      axios        .post(this.uploadUrl, formData, {          headers: this.headers,        })        .then((res) => {          if (res.data) {            if (file instanceof Array) {              //判断是否是数组              file.map((v, i) => {                v.status = "success";                v.message = "";                v.url = res.data[i];              });            } else {              file.status = "success";              file.message = "";              file.url = res.data.uploadUrl;            }          }        })        .catch((err) => {          this.$notify({            type: "warning",            message: "上传失败",          });        });    },    //删除    delUploadImg(item) {      this.fileList = this.fileList.filter((v) => v.url != item.url);    }  },};</script>