删除不必要文件
This commit is contained in:
parent
d528a2026a
commit
88696725ba
|
|
@ -1,358 +0,0 @@
|
|||
<template>
|
||||
<div class="upload-container">
|
||||
<el-upload class="upload-demo" drag action="#" multiple :show-file-list="true" :before-upload="beforeUpload"
|
||||
:on-change="handleFileChange" :on-remove="handleRemove" :on-exceed="handleExceed" :file-list="files"
|
||||
:accept="accept" :limit="limitUploadNum" :auto-upload="false">
|
||||
<div class="upload-content">
|
||||
<!-- PDF文件预览区域 -->
|
||||
<div v-if="showPdfPreview" class="pdf-preview">
|
||||
<div class="pdf-icon">
|
||||
<i class="el-icon-document"></i>
|
||||
</div>
|
||||
<div class="pdf-info">
|
||||
<div class="pdf-name">{{ previewFileName }}</div>
|
||||
<div class="pdf-size">{{ formatFileSize(previewFileSize) }}</div>
|
||||
</div>
|
||||
<div class="preview-overlay">
|
||||
<div class="preview-text">
|
||||
<div class="main-text">点击更换PDF</div>
|
||||
<div class="tip-text">或拖拽新文件到此处</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 默认上传区域 -->
|
||||
<div v-else class="upload-text">
|
||||
<div class="main-text"> + 点击或将文件拖拽到这里上传</div>
|
||||
<div class="tip-text">
|
||||
<div>文件大小上限 {{ maxFileTips }}</div>
|
||||
<div>支持文件类型：{{ uploadType }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UploadPdf',
|
||||
props: {
|
||||
fileList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 固定PDF类型和20MB大小限制，也可通过props动态传入
|
||||
maxFileTips: {
|
||||
type: String,
|
||||
default: '20MB'
|
||||
},
|
||||
uploadType: {
|
||||
type: String,
|
||||
default: 'pdf'
|
||||
},
|
||||
limitUploadNum: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
files: this.fileList,
|
||||
previewFileName: '',
|
||||
previewFileSize: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
beforeUpload(file) {
|
||||
// 验证文件类型
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||||
const isAllowedType = this.allowedTypes.includes(fileExtension);
|
||||
|
||||
// 验证MIME类型
|
||||
const isAllowedMimeType = this.mimeTypes.includes(file.type);
|
||||
|
||||
// 验证文件大小（20MB）
|
||||
const isLtMaxSize = file.size / 1024 / 1024 < this.maxSizeMB;
|
||||
|
||||
if (!isAllowedType || !isAllowedMimeType) {
|
||||
this.$message.error(`只能上传 ${this.uploadType} 格式的文件!`);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!isLtMaxSize) {
|
||||
this.$message.error(`文件大小不能超过 ${this.maxFileTips}!`);
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
// 文件状态改变
|
||||
handleFileChange(file, fileList) {
|
||||
this.files = fileList;
|
||||
|
||||
// 生成PDF预览信息
|
||||
if (file.raw && this.isPdfFile(file.raw) && fileList.length === 1) {
|
||||
this.previewFileName = file.name;
|
||||
this.previewFileSize = file.size;
|
||||
} else {
|
||||
// 清除预览信息
|
||||
this.previewFileName = '';
|
||||
this.previewFileSize = 0;
|
||||
}
|
||||
|
||||
this.$emit('file-change', this.files);
|
||||
},
|
||||
// 处理文件超出限制
|
||||
handleExceed(files, fileList) {
|
||||
if (files.length > 0) {
|
||||
this.files = [];
|
||||
const newFile = files[0];
|
||||
this.beforeUpload(newFile);
|
||||
|
||||
const newFileObj = {
|
||||
name: newFile.name,
|
||||
size: newFile.size,
|
||||
type: newFile.type,
|
||||
raw: newFile,
|
||||
uid: Date.now()
|
||||
};
|
||||
|
||||
this.files = [newFileObj];
|
||||
|
||||
if (this.isPdfFile(newFile)) {
|
||||
this.previewFileName = newFile.name;
|
||||
this.previewFileSize = newFile.size;
|
||||
}
|
||||
|
||||
this.$emit('file-change', this.files);
|
||||
}
|
||||
},
|
||||
// 移除文件
|
||||
handleRemove(file, fileList) {
|
||||
this.files = fileList;
|
||||
|
||||
if (fileList.length === 0 || (fileList[0] && !this.isPdfFile(fileList[0].raw))) {
|
||||
this.previewFileName = '';
|
||||
this.previewFileSize = 0;
|
||||
} else if (fileList.length === 1 && fileList[0] && this.isPdfFile(fileList[0].raw)) {
|
||||
this.previewFileName = fileList[0].name;
|
||||
this.previewFileSize = fileList[0].size;
|
||||
}
|
||||
|
||||
this.$emit('file-change', fileList);
|
||||
},
|
||||
// 判断是否为PDF文件
|
||||
isPdfFile(file) {
|
||||
return file && (
|
||||
file.type === 'application/pdf' ||
|
||||
file.name.toLowerCase().endsWith('.pdf')
|
||||
);
|
||||
},
|
||||
// 格式化文件大小显示
|
||||
formatFileSize(size) {
|
||||
if (size < 1024) {
|
||||
return `${size} B`;
|
||||
} else if (size < 1024 * 1024) {
|
||||
return `${(size / 1024).toFixed(1)} KB`;
|
||||
} else {
|
||||
return `${(size / 1024 / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
},
|
||||
// 清空所有文件
|
||||
clearFiles() {
|
||||
this.files = [];
|
||||
this.previewFileName = '';
|
||||
this.previewFileSize = 0;
|
||||
this.$emit('file-change', []);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 是否显示PDF预览
|
||||
showPdfPreview() {
|
||||
return this.previewFileName &&
|
||||
this.files.length === 1 &&
|
||||
this.files[0] &&
|
||||
this.files[0].raw &&
|
||||
this.isPdfFile(this.files[0].raw);
|
||||
},
|
||||
accept() {
|
||||
return this.uploadType.split('、').map(type => `.${type}`).join(',');
|
||||
},
|
||||
allowedTypes() {
|
||||
return this.uploadType.split('、');
|
||||
},
|
||||
// 最大文件大小(MB)
|
||||
maxSizeMB() {
|
||||
const sizeStr = this.maxFileTips.toLowerCase();
|
||||
if (sizeStr.includes('mb')) {
|
||||
return parseFloat(sizeStr);
|
||||
} else if (sizeStr.includes('kb')) {
|
||||
return parseFloat(sizeStr) / 1024;
|
||||
} else if (sizeStr.includes('gb')) {
|
||||
return parseFloat(sizeStr) * 1024;
|
||||
}
|
||||
return 20;
|
||||
},
|
||||
// PDF对应的MIME类型
|
||||
mimeTypes() {
|
||||
return ['application/pdf'];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
fileList: {
|
||||
handler(newVal) {
|
||||
this.files = newVal;
|
||||
// 外部传入文件列表时生成预览
|
||||
if (newVal.length === 1 && newVal[0] && newVal[0].raw && this.isPdfFile(newVal[0].raw)) {
|
||||
this.previewFileName = newVal[0].name;
|
||||
this.previewFileSize = newVal[0].size;
|
||||
} else {
|
||||
this.previewFileName = '';
|
||||
this.previewFileSize = 0;
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload-container {
|
||||
width: 100%;
|
||||
|
||||
.upload-demo {
|
||||
width: 100%;
|
||||
|
||||
::v-deep .el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border: 2px dashed #DCDFE6;
|
||||
border-radius: 8px;
|
||||
background-color: #FAFAFA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
border-color: #409EFF;
|
||||
background-color: #F5F7FA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
|
||||
// PDF预览样式
|
||||
.pdf-preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
background-color: #f8f9fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.pdf-icon {
|
||||
font-size: 48px;
|
||||
color: #E34C26; // PDF标志性红色
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.pdf-info {
|
||||
text-align: left;
|
||||
|
||||
.pdf-name {
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.pdf-size {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
|
||||
.preview-text {
|
||||
text-align: center;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
|
||||
.main-text {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .preview-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认上传区域样式
|
||||
.upload-text {
|
||||
text-align: center;
|
||||
|
||||
.main-text {
|
||||
font-size: 18px;
|
||||
color: #1F72EA;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
line-height: 1.5;
|
||||
|
||||
div {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue