前言
开发环境为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