<template>
<div>
<div>
<el-upload
class="flx-align-center"
:file-list="fileList"
:multiple="multiple"
:limit="limit"
:disabled="disabled"
:accept="fileType"
:show-file-list="false"
:http-request="handleHttpUpload"
:before-upload="beforeUpload"
:on-exceed="handleExceed"
>
<slot name="upload-btn">
<div class="upload-content">
<el-button type="primary" :icon="UploadFilled" plain @click="handleClick">点击上传</el-button>
</div>
</slot>
</el-upload>
<div class="upload-tip" v-if="tipShow">
<slot name="tip">{{ tipComputed }}</slot>
</div>
</div>
<div class="upload-box">
<slot></slot>
</div>
</div>
</template>
<script setup lang="ts" name="UploadBasics">
import { ref, computed } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import type { UploadUserFile } from "element-plus";
import { ElNotification } from "element-plus";
import { uploadImg } from "@/api/modules/upload";
import { getFileType } from "@/utils/assetsFile";
interface UploadFileProps {
fileType: string;
fileSize: number;
limit: number;
tipShow: boolean;
multiple: boolean;
fileList: UploadUserFile[];
disabled: boolean;
handleClick: () => void;
}
const props = withDefaults(defineProps<Partial<UploadFileProps>>(), {
fileType: ".pdf, .jpg, .png, .jpeg",
fileSize: 10,
tipShow: true,
multiple: true,
fileList: () => [],
disabled: false
});
const tipComputed = computed(() => {
const tip = props.fileType.replace(/\./g, "").replace(/,/g, "、").toUpperCase();
return `支持${tip}格式,大小不得超过${props.fileSize}M`;
});
const beforeUpload = rawFile => {
const extension = getFileType(rawFile.name, 1);
const fileType = props.fileType.replace(/\./g, "");
const imgType = fileType.includes(extension);
if (!imgType) {
ElNotification({
title: "温馨提示",
message: "上传图片不符合所需的格式!",
type: "warning"
});
return false;
}
if (rawFile.size / 1024 / 1024 > props.fileSize) {
ElNotification({
title: "温馨提示",
message: `上传图片大小不能超过 ${props.fileSize}M!`,
type: "warning"
});
return false;
}
};
const handleExceed = () => {
ElNotification({
title: "温馨提示",
message: `超出文件上传最大数量:${props.limit}!`,
type: "warning"
});
return false;
};
const uploadLatestFile = ref<UploadUserFile>();
const uploadList = ref<UploadUserFile[]>([]);
const handleHttpUpload = async options => {
let formData = new FormData();
formData.append("file", options.file);
try {
const { data } = await uploadImg(formData);
uploadLatestFile.value = {
name: data.data.name as string,
url: data.data.url
};
uploadList.value = [
...uploadList.value,
{
name: data.data.name as string,
url: data.data.url
}
];
emits("upload-success", { uploadLatestFile: uploadLatestFile.value, uploadList: uploadList.value });
} catch (error) {
options.onError(error as any);
}
};
const emits = defineEmits(["upload-success"]);
defineExpose({
uploadList,
uploadLatestFile
});
</script>
<style lang="scss" scoped>
// 上传按钮区
.upload-content {
display: flex;
flex-direction: column;
}
// 上传文件显示容器
.upload-box {
max-height: 400px;
// margin-top: 10px;
overflow: auto;
}
// 提示
.upload-tip {
display: flex;
align-items: center;
font-size: 12px;
line-height: 32px;
color: var(--el-label-color-regular);
}
</style>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.