基于AntDesign vue的自定义文件上传

前言

开发环境为vue3.x+AntDesign,基于AntDesign中的upload组件封装，因为有时文件上传不仅仅需要图片，类似本次工作中遇到上传的文件有可能是图片、world、pdf等；

实现思路：将upload再次封装，根据文件的type、name后缀判断当前文件的类型，图片、视频支持预览，其他类型文件仅支持下载

实际开发中文件上传接口可能需要传token以及其他的参数，所以可以通过对应参数传参。

---

一、文件上传

主要代码如下：

<template>
  <div class="lemon-upload-layout">
    <a-upload
      :multiple="props.multipleType"
      :maxCount="props.maxLength"
      v-model:file-list="filesList"
      :accept="props.isTypeAll ? '' : props.acceptType"
      list-type="picture-card"
      :name="uploadName"
      :action="props.FileUploadUrl"
      :headers="props.headers"
      :data="props.uplaodData"
      :openFileDialogOnClick="true"
      :showUploadList="true"
      :before-upload="beforeUpload"
      @change="HandleChanges"
    >
      <cloud-upload-outlined style="font-size: 36px; color: #999" v-if="filesList.length < props.maxLength" />
    </a-upload>
    <!-- 文件列表 -->
    <div class="show-files-list-wrap ant-upload-list ant-upload-list-picture-card">
      <!-- item -->
      <div class="ant-upload-list-picture-card-container" v-for="(item, idx) in filesList" :key="idx">  
        <div class="ant-upload-list-item ant-upload-list-item-list-type-picture-card" :class=" item.status == 'error' ? 'ant-upload-list-item-error ': ''" >
          <div class="ant-upload-list-item-info">
            <img :src="item.thumbUrl" alt="image" v-if="item.type.indexOf('image') != -1 && item.thumbUrl && item.status != 'uploading'" />
            <!-- txt -->
            <template v-else-if="'txt'.includes(item.name.split('.')[item.name.split('.').length - 1].toLowerCase())">
              <img src="./imgs/txt.png" alt="image" class="other-img-file" />
              <p class="file-name">{
  { item.name }}</p>
            </template>
            <!-- zip -->
            <template v-else-if="'zip'.includes(item.name.split('.')[item.name.split('.').length - 1].toLowerCase())">
              <img src="./imgs/zip.png" alt="image" class="other-img-file" />
              <p class="file-name">{
  { item.name }}</p>
            </template>
            <!-- rar -->
            <template v-else-if="'rar'.includes(item.name.split('.')[item.name.split('.').length - 1].toLo