van-uploader 二次封装，多图片上传到服务器，从服务器进行删除图片

前言：

最近写的一个h5项目，我采用的是vant-ui ，图片上传算是无可避免的，所以根据需求进行二次封装van-uploader

---

<template>
  <div class="">
    <div style="width: 90%; margin: 0 auto; border-bottom: 1px solid #f5f5f5">
      <p
        style="
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          margin-left: 15px;
          margin-top: 10px;
        "
      >
        支持jpg、png格式文件。
      </p>
      <van-uploader
        :upload-icon="uploadIcon"
        v-model="formData"
        :disabled="show"
        :before-read="individualbeforeRead"
        :after-read="recordApprovaAfterRead"
        :before-delete="recordApprovaUploadImg"
        style="margin-left: 15px; margin-top: 10px; margin-bottom: 20px"
      />
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
import {
    Toast } from "vant";
import {
    deleteImg } from "@/api/businessHandle/houseRepair";
export default {
   
  props: {
   
    fileList: {
   
      type: Array,
      default() {
   
        return [];
      },
    },
    fileId: {
   
      type: Number,
      default() {
   
        return null;
      },
    },
    docid: {
   
      type: Number,
      default() {
   
        return null;
      },
    },
    show: {
   
      type: Boolean,
      default() {
   
        return false;
      },
    }