近期做到的项目中有涉及到上传图片上传文件的需求,因为是pc管理后台,用到了element-plus框架,所以我也一起使用element-plus中的上传图片上传图片功能,并对它进行封装成一个组件,方便在多个地方使用。
一、效果图
1、上传文件、视频
2、上传图片
二、代码分析及全部代码
在这里上传图片和文件是分成了两个组件进行封装的,因为项目需求要求不一致,所以分开了,大家使用时有需要的话可以将它们合并到一起。
1、上传文件相关代码
<template>
<div class="upload_wrap">
<el-upload
v-if="!props.isDisableUpload"
class="upload"
ref="uploadRef"
:file-list="waitFileList"
:multiple="props.isMultiple"
:limit="props.limitNum"
:accept="props.acceptType"
:auto-upload="false"
:show-file-list="false"
:disabled="props.isDisableUpload"
:on-change="handleChange"
>
<div class="el-upload__text">
<img src="@/assets/images/icon_upload.png" />
<span>上传文件</span>
</div>
</el-upload>
<div class="template_list">
<div class="template" v-for="(item, index) in waitFileList" :key="index">
<span>
<img src="@/assets/images/icon_link.png" />
</span>
<span class="documentName">{
{
item.name }}</span>
<span v-if="!props.isDisableUpload">
<el-icon color="#000000a6" size="16" @click="removeFile(item)"
><Close
/></el-icon>
</span>
<span v-if="isDownLoad" style="paddingleft: 5px">
<img
src="@/assets/images/icon_download.png"
@click="handleDownLoad(item)"
/>
</span>
</div>
</div>
<span class="tips" v-if="!props.isDisableUpload"
>支持{
{
acceptTypeDesc }};文件大小不能超过{
{
props.maxFileSize }}M</span
>
</div>
</template>
<script lang="ts" setup>
import {
ref, watch } from "vue";
import {
ElLoading, ElMessage } from "element-plus";
import {
request } from "@/api/axios";
import {
Close } from "@element-plus/icons-vue";
const emits = defineEmits(["fileSuccess", "fileRemove"]);
interface Props {
acceptType?: string; // 上传文件类型
acceptTypeDesc?: string; // 描述 - 上传文件类型
isMultiple?: boolean; // 是否可批量上传
limitNum?: number; // 允许上传文件的最大数量
isDisableUpload?: boolean; // 是否禁用上传
maxFileSize?: number; // 文件大小
action?: string;
fileList?: any; // 回显的文件
isDownLoad?: boolean; // 是否可以下载
}
// 接收父组件传递过来的参数
const props = withDefaults(defineProps<Props>(), {
acceptType: ".xls,.doc",
acceptTypeDesc: "doc/xls",
isMultiple: true,
limitNum: 10,
isDisableUpload: false,
maxFileSize: 10,
action: "/activity/resource/uploadFile",
fileList: []