<template>
<div class="upload-view">
<el-upload ref="uploadRef" class="upload-v" drag action="#" :show-file-list="false" :accept="fileAccept" :autoUpload="false" :onChange="fileUpload">
<!-- 开始
上传 -->
<div v-if="!fileList.length">
<SvgIcon icon="public-upload" :size="36" />
<div class="upload__text">将
文件拖拽至此区
域，或 <span class="text">点击
上传</span></div>
</div>
<template v-if="fileList.length">
<div class="file-item" v-for="file in fileList" :key="file.id">
<div class="file-info">
<SvgIcon :icon="file.icon" :size="52" />
<div>
<div class="file-name">{{ file?.fieldName }}</div>
<div class="file-size">{{ `(${(Number(file?.fieldSize) /
1024).toFixed(2)}
KB)` }}</div>
</div>
</div>
<div class="file-progress" v-if="file?.progress !==
100 && !fileReturnData?.some((i: any) => i.errorFileName)">
<el-progress :percentage="file?.progress" />
<div class="close" @click.stop="removeFile(file.id)">
<SvgIcon icon="public-close" :size="16" />
</div>
</div>
<el-button v-if="file?.progress ===
100 && !fileReturnData?.some((i: any) => i.errorFileName)" @click.stop="removeFile(file.id)">重新选择</el-button>
<!-- 插槽 -->
<slot :file="file" />
</div>
</template>
</el-upload>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, type UploadFile } from "element-plus";
// import { aliyunUpload } from "@utils/uploadLib";
import { generateUUID } from "@/utils/lib";
import type { FileObject } from "./index.d";
defineOptions({
name: "UploadFile"
});
// 已
上传的
文件列表
const fileList = ref<FileObject[]>([]);
const fileReturnData = ref([]);
const props = withDefaults(
defineProps<{
fileAccept?: string;
limit?: number;
// 导出的api
uploadApi: Function;
}>(),
{
limit: 1,
fileAccept: ".zip,.rar,.txt,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.jpg,.jpeg,.png,.avi,.mp4"
}
);
const emit = defineEmits(["change"]);
/**
* @description: 删除
文件
* @param {*} id
* @return {*}
*/
const removeFile = (id: string) => {
fileList.value = fileList.value.filter((item) => item.id !== id);
};
/**
* @description:
文件上传
* @param {*} file
* @return {*}
*/
const fileUpload = async (file: UploadFile) => {
console.log("🚀 ~ fileUpload ~ file:", file)
if (props.limit && fileList.value.length === props.limit) {
ElMessage.warning(`最多
上传${props.limit}个
文件`);
return;
}
let fileSuffix = (file.name || "").substring((file.name || "").lastIndexOf(".") + 1, file.name?.length);
const fileObject = reactive({
id: generateUUID(),
fieldName: file.name,
fieldSize: file.size,
icon: `manage-d_${fileSuffix}`,
progress: 0,
fieldValue: ""
});
fileList.value.unshift(fileObject);
try {
// let { url } = await aliyunUpload(file.raw!, {}, 1);
// fileObject.fieldValue = url;
const formData = new FormData();
formData.append("uploadFile", file.raw!);
let { data } = await props.uploadApi(formData);
fileReturnData.value = data;
fileObject.progress =
100;
emit("change", data, fileList.value);
} catch (error) {
console.log(error);
}
};
defineExpose({
removeFile
});
</script>
<style lang="scss" scoped>
.upload-view {
height:
100%;
.upload-v {
height: 300px;
:deep(.el-upload) {
height:
100%;
.el-upload-dragger {
height:
100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.upload__text {
margin-top: 20px;
font-weight: 500;
font-size: 16px;
color: #333333;
.text {
color: var(--color-primary);
}
}
.file-item {
.file-info {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
.svg-icon {
margin-bottom: 16px;
}
.file-name {
font-weight: 500;
font-size: 16px;
color: #333333;
}
.file-size {
margin-top: 4px;
font-weight: 400;
font-size: 14px;
color: #999999;
}
// .svg-icon {
// color: var(--color-primary);
// }
}
.file-progress {
margin-top: 30px;
display: flex;
align-items: center;
:deep(.el-progress) {
flex: 1;
.el-progress-bar {
width: 400px;
}
.el-progress__text {
font-weight: 400;
font-size: 14px !important;
color: #999999;
}
}
.close {
cursor: pointer;
color: #fff;
}
}
.el-button {
margin-top: 30px;
height: 40px;
padding: 6px 26px;
}
}
}
}
</style>
扫一扫
2908
到【灌水乐园】发言
