基于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"