单文件上传优化
This commit is contained in:
parent
2f8541ea17
commit
b3729efd6f
|
|
@ -1,11 +1,24 @@
|
|||
<template>
|
||||
<div class="upload-container">
|
||||
<el-upload ref="upload" class="upload-demo" drag action="#" multiple :show-file-list="true"
|
||||
:before-upload="beforeUpload" :on-remove="handleRemove" :on-change="handleFileChange"
|
||||
:on-exceed="handleExceed" :file-list="files" :accept="accept" :limit="limitUploadNum"
|
||||
:auto-upload="autoUpload" :http-request="customUpload">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
class="upload-demo"
|
||||
drag
|
||||
action="#"
|
||||
multiple
|
||||
:show-file-list="true"
|
||||
:before-upload="beforeUpload"
|
||||
:on-remove="handleRemove"
|
||||
:on-change="handleFileChange"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="files"
|
||||
:accept="accept"
|
||||
:limit="limitUploadNum"
|
||||
:auto-upload="autoUpload"
|
||||
:http-request="customUpload"
|
||||
>
|
||||
<div class="upload-content">
|
||||
<!-- 当只有一张图片时显示缩略图 -->
|
||||
<!-- 图片预览 -->
|
||||
<div v-if="showImagePreview" class="image-preview">
|
||||
<img :src="previewImageUrl" :alt="previewImageName" class="preview-thumbnail" />
|
||||
<div class="preview-overlay">
|
||||
|
|
@ -16,10 +29,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 当只有一个文档文件时显示文件图标 -->
|
||||
<!-- 文档预览 -->
|
||||
<div v-else-if="showFilePreview" class="file-preview">
|
||||
<div class="file-icon-container">
|
||||
<i :class="getFileIconClass()" class="file-icon"></i>
|
||||
<i :class="fileIconClass" class="file-icon"></i>
|
||||
<div class="file-name">{{ previewFileName }}</div>
|
||||
</div>
|
||||
<div class="preview-overlay">
|
||||
|
|
@ -50,6 +63,30 @@ import {
|
|||
uploadSmallFile,
|
||||
uploadLargeFile,
|
||||
} from '@/api/common/uploadFile.js'
|
||||
|
||||
// 常量定义
|
||||
const FILE_STATUS = {
|
||||
READY: 'ready',
|
||||
UPLOADING: 'uploading',
|
||||
SUCCESS: 'success',
|
||||
FAIL: 'fail',
|
||||
REMOVED: 'removed'
|
||||
}
|
||||
|
||||
const FILE_TYPES = {
|
||||
IMAGE: '1',
|
||||
DOCUMENT: '2'
|
||||
}
|
||||
|
||||
const DEFAULT_FILE_SIZE = 5 * 1024 * 1024 // 5MB
|
||||
const ICON_MAP = {
|
||||
pdf: 'el-icon-document',
|
||||
doc: 'el-icon-document',
|
||||
docx: 'el-icon-document',
|
||||
xls: 'el-icon-document',
|
||||
xlsx: 'el-icon-document',
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'UploadFile',
|
||||
props: {
|
||||
|
|
@ -89,47 +126,29 @@ export default {
|
|||
previewImageName: '',
|
||||
previewFileName: '',
|
||||
previewFileType: '',
|
||||
isUploading: false, // 添加上传状态标识
|
||||
defaultFileSize: 1024 * 1024 * 5, // 默认文件大小5MB 超过5MB算大文件上传
|
||||
skipNextChange: false,
|
||||
isUploading: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 是否显示图片预览
|
||||
showImagePreview() {
|
||||
return this.previewImageUrl && this.files.length === 1
|
||||
},
|
||||
// 是否显示文件预览
|
||||
showFilePreview() {
|
||||
return (
|
||||
this.previewFileName &&
|
||||
this.previewFileType &&
|
||||
this.files.length === 1
|
||||
)
|
||||
return this.previewFileName && this.previewFileType && this.files.length === 1
|
||||
},
|
||||
accept() {
|
||||
return this.uploadType
|
||||
.split('、')
|
||||
.map((type) => `.${type}`)
|
||||
.join(',')
|
||||
return this.allowedTypes.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
|
||||
}
|
||||
if (sizeStr.includes('mb')) return parseFloat(sizeStr)
|
||||
if (sizeStr.includes('kb')) return parseFloat(sizeStr) / 1024
|
||||
if (sizeStr.includes('gb')) return parseFloat(sizeStr) * 1024
|
||||
return 20
|
||||
},
|
||||
// 获取MIME类型映射
|
||||
mimeTypes() {
|
||||
const typeMap = {
|
||||
png: 'image/png',
|
||||
|
|
@ -141,21 +160,18 @@ export default {
|
|||
xls: 'application/vnd.ms-excel',
|
||||
xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
}
|
||||
return this.allowedTypes.map((type) => typeMap[type] || '')
|
||||
return this.allowedTypes.map(type => typeMap[type] || '')
|
||||
},
|
||||
fileIconClass() {
|
||||
return ICON_MAP[this.previewFileType] || 'el-icon-document'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
fileList: {
|
||||
handler(newVal) {
|
||||
if (this.files.length === 0 && newVal.length > 0) {
|
||||
// 使用 $nextTick 确保 DOM 更新完成
|
||||
this.$nextTick(() => {
|
||||
// 直接设置上传组件的内部文件列表
|
||||
if (this.$refs.upload) {
|
||||
this.$refs.upload.uploadFiles = this.formatFileList(newVal)
|
||||
}
|
||||
this.files = this.formatFileList(newVal)
|
||||
// 单独处理预览
|
||||
this.handlePreviewFromExternal(newVal)
|
||||
})
|
||||
}
|
||||
|
|
@ -165,21 +181,16 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
// 文件验证
|
||||
beforeUpload(file) {
|
||||
// 如果正在上传中，阻止新的上传
|
||||
if (this.isUploading) {
|
||||
this.$message.warning('当前有文件正在上传，请稍后再试')
|
||||
return false
|
||||
}
|
||||
|
||||
// 验证文件类型
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase()
|
||||
const fileExtension = this.getFileExtension(file.name)
|
||||
const isAllowedType = this.allowedTypes.includes(fileExtension)
|
||||
|
||||
// 验证MIME类型（额外验证）
|
||||
const isAllowedMimeType = this.mimeTypes.includes(file.type)
|
||||
|
||||
// 验证文件大小
|
||||
const isLtMaxSize = file.size / 1024 / 1024 < this.maxSizeMB
|
||||
|
||||
if (!isAllowedType || !isAllowedMimeType) {
|
||||
|
|
@ -194,271 +205,180 @@ export default {
|
|||
|
||||
return true
|
||||
},
|
||||
// 文件状态改变
|
||||
|
||||
// 文件变化处理
|
||||
handleFileChange(file, fileList) {
|
||||
// 如果文件状态是移除或失败或者成功，不处理
|
||||
if (file.status === 'removed' || file.status === 'fail' || file.status === 'success') {
|
||||
console.log('现在的文件：', this.files);
|
||||
return
|
||||
}
|
||||
// 更新文件列表
|
||||
if (this.shouldIgnoreFileChange(file.status)) return
|
||||
|
||||
this.files = this.formatFileList(fileList)
|
||||
// 生成预览
|
||||
if (file.raw && fileList.length === 1) {
|
||||
if (this.isImageFile(file.raw)) {
|
||||
// 图片预览
|
||||
this.generateImagePreview(file.raw)
|
||||
} else if (this.isDocumentFile(file.raw)) {
|
||||
// 文档预览
|
||||
this.generateDocumentPreview(file.raw)
|
||||
this.updatePreview(fileList)
|
||||
},
|
||||
|
||||
// 文件超出限制处理
|
||||
handleExceed(files, fileList) {
|
||||
console.log('文件超出限制处理', files, fileList)
|
||||
|
||||
if (files.length > 0) {
|
||||
// 触发删除事件
|
||||
this.$emit('del-file', { ...fileList[0], response: fileList[0].res })
|
||||
|
||||
// 清空并添加新文件
|
||||
this.files = []
|
||||
const newFile = files[0]
|
||||
const newFileObj = this.createFileObject(newFile)
|
||||
this.files = [newFileObj]
|
||||
|
||||
this.updatePreview([newFileObj])
|
||||
|
||||
// 自动上传
|
||||
if (this.autoUpload && !this.isUploading) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.upload.submit()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// 如果不是单个文件，清除预览
|
||||
this.clearPreview()
|
||||
}
|
||||
},
|
||||
|
||||
// 添加上传成功的处理
|
||||
// 文件移除处理
|
||||
handleRemove(file, fileList) {
|
||||
if (!file) {
|
||||
this.clearPreview()
|
||||
return true
|
||||
}
|
||||
|
||||
if (this.isUploading && file.status === FILE_STATUS.UPLOADING) {
|
||||
this.$message.warning('文件正在上传中，请稍后再删除')
|
||||
return false
|
||||
}
|
||||
|
||||
this.updatePreview(fileList)
|
||||
this.files = this.formatFileList(fileList)
|
||||
|
||||
const delFileObj = this.findFileByRawFile(file.raw)
|
||||
if (delFileObj) {
|
||||
delFileObj.response = delFileObj.res
|
||||
this.$emit('del-file', delFileObj)
|
||||
}
|
||||
|
||||
this.$emit('file-change', this.getCurrentFiles(), this.type)
|
||||
return true
|
||||
},
|
||||
|
||||
// 自定义上传
|
||||
async customUpload(options) {
|
||||
const { file } = options
|
||||
this.isUploading = true
|
||||
|
||||
const uploadFileObj = this.findFileByRawFile(file)
|
||||
if (!uploadFileObj) {
|
||||
this.handleError(new Error('文件对象不存在'), file)
|
||||
return
|
||||
}
|
||||
|
||||
const fileUid = uploadFileObj.uid
|
||||
const statusText = this.fileUploadRule.fields_json ? '识别中' : '上传中'
|
||||
|
||||
this.updateFileStatus(fileUid, FILE_STATUS.UPLOADING, statusText, null, 0)
|
||||
this.$bus.$emit('startUpload', statusText)
|
||||
|
||||
try {
|
||||
const formData = this.createFormData(file)
|
||||
const res = await this.uploadFile(formData, file.size)
|
||||
|
||||
if (res.code === 200) {
|
||||
this.handleSuccess(res, uploadFileObj)
|
||||
} else {
|
||||
this.handleError(new Error(res.message || '上传失败'), uploadFileObj)
|
||||
}
|
||||
} catch (err) {
|
||||
this.handleError(err, uploadFileObj)
|
||||
} finally {
|
||||
this.isUploading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 上传成功处理
|
||||
handleSuccess(response, file) {
|
||||
this.$bus.$emit('endUpload')
|
||||
// 更新文件状态为成功
|
||||
this.updateFileStatus(file.uid, 'success', '', response.data, 100)
|
||||
// 触发文件变化事件
|
||||
this.updateFileStatus(file.uid, FILE_STATUS.SUCCESS, '', response.data, 100)
|
||||
this.$emit('file-change', this.getCurrentFiles(), this.type)
|
||||
// 重置上传状态
|
||||
this.isUploading = false
|
||||
},
|
||||
|
||||
// 添加上传失败的处理
|
||||
// 上传失败处理
|
||||
handleError(error, file) {
|
||||
console.error('上传失败:', error)
|
||||
this.$bus.$emit('endUpload')
|
||||
// 上传失败，移除文件
|
||||
this.removeFailedFile(file.uid)
|
||||
// 重置上传状态
|
||||
this.isUploading = false
|
||||
},
|
||||
// 自定义上传逻辑
|
||||
async customUpload(options) {
|
||||
console.log(options);
|
||||
|
||||
const { file } = options;
|
||||
// 设置上传状态
|
||||
this.isUploading = true;
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('params', JSON.stringify(this.fileUploadRule));
|
||||
// 工具方法
|
||||
getFileExtension(filename) {
|
||||
return filename.split('.').pop().toLowerCase()
|
||||
},
|
||||
|
||||
// 从 el-upload 的文件列表中查找对应的完整文件对象
|
||||
const uploadFileObj = this.findFileByRawFile(file);
|
||||
if (!uploadFileObj) {
|
||||
console.error('未找到对应的文件对象');
|
||||
this.handleError(new Error('文件对象不存在'), file);
|
||||
return;
|
||||
}
|
||||
shouldIgnoreFileChange(status) {
|
||||
return [FILE_STATUS.REMOVED, FILE_STATUS.FAIL, FILE_STATUS.SUCCESS].includes(status)
|
||||
},
|
||||
|
||||
const fileUid = uploadFileObj.uid;
|
||||
createFormData(file) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('params', JSON.stringify(this.fileUploadRule))
|
||||
return formData
|
||||
},
|
||||
|
||||
// 更新文件状态为上传中，并设置初始进度为 0
|
||||
this.updateFileStatus(
|
||||
fileUid,
|
||||
'uploading',
|
||||
this.fileUploadRule.fields_json ? '识别中' : '上传中',
|
||||
null,
|
||||
0,
|
||||
);
|
||||
async uploadFile(formData, fileSize) {
|
||||
const isLargeFile = fileSize > DEFAULT_FILE_SIZE
|
||||
const hasOcr = !!this.fileUploadRule.fields_json
|
||||
|
||||
try {
|
||||
this.$bus.$emit(
|
||||
'startUpload',
|
||||
this.fileUploadRule.fields_json ? '识别中' : '上传中',
|
||||
);
|
||||
|
||||
let res = null;
|
||||
if (this.defaultFileSize < file.size) {
|
||||
if (this.fileUploadRule.fields_json) {
|
||||
res = await uploadLargeFileByOcr(formData);
|
||||
if (isLargeFile) {
|
||||
return hasOcr ? await uploadLargeFileByOcr(formData) : await uploadLargeFile(formData)
|
||||
} else {
|
||||
res = await uploadLargeFile(formData);
|
||||
}
|
||||
} else {
|
||||
if (this.fileUploadRule.fields_json) {
|
||||
res = await uploadSmallFileByOcr(formData);
|
||||
} else {
|
||||
res = await uploadSmallFile(formData);
|
||||
}
|
||||
}
|
||||
if (res.code === 200) {
|
||||
this.handleSuccess(res, uploadFileObj);
|
||||
} else {
|
||||
this.handleError(new Error(res.message || '上传失败'), uploadFileObj);
|
||||
}
|
||||
} catch (err) {
|
||||
this.handleError(err, uploadFileObj);
|
||||
} finally {
|
||||
// 无论成功失败，都重置上传状态
|
||||
this.isUploading = false;
|
||||
return hasOcr ? await uploadSmallFileByOcr(formData) : await uploadSmallFile(formData)
|
||||
}
|
||||
},
|
||||
|
||||
// 通过原始文件对象查找对应的上传文件对象
|
||||
findFileByRawFile(rawFile) {
|
||||
return this.files.find(item =>
|
||||
item.raw === rawFile ||
|
||||
(item.name === rawFile.name && item.size === rawFile.size)
|
||||
);
|
||||
},
|
||||
// 移除上传失败的文件
|
||||
removeFailedFile(fileUid) {
|
||||
console.log('移除上传失败的文件:', fileUid)
|
||||
const fileIndex = this.files.findIndex(
|
||||
(item) => item.uid === fileUid,
|
||||
)
|
||||
},
|
||||
|
||||
removeFailedFile(fileUid) {
|
||||
const fileIndex = this.files.findIndex(item => item.uid === fileUid)
|
||||
if (fileIndex !== -1) {
|
||||
// 从文件列表中移除
|
||||
this.files.splice(fileIndex, 1)
|
||||
console.log('移除失败文件后的文件列表:', this.files)
|
||||
// 清除预览
|
||||
this.clearPreview()
|
||||
// 触发文件变化事件
|
||||
this.$emit('file-change', this.getCurrentFiles(), this.type)
|
||||
}
|
||||
},
|
||||
|
||||
// 更新文件状态
|
||||
updateFileStatus(
|
||||
fileUid,
|
||||
status,
|
||||
statusText,
|
||||
responseData = null,
|
||||
percentage = null,
|
||||
) {
|
||||
const fileIndex = this.files.findIndex(
|
||||
(item) => item.uid === fileUid,
|
||||
)
|
||||
if (fileIndex !== -1) {
|
||||
const updatedFile = {
|
||||
...this.files[fileIndex],
|
||||
status: status,
|
||||
updateFileStatus(fileUid, status, statusText = null, responseData = null, percentage = null) {
|
||||
const fileIndex = this.files.findIndex(item => item.uid === fileUid)
|
||||
if (fileIndex === -1) {
|
||||
console.warn('未找到要更新的文件:', fileUid)
|
||||
return
|
||||
}
|
||||
|
||||
if (statusText) {
|
||||
updatedFile.statusText = statusText
|
||||
}
|
||||
const updatedFile = { ...this.files[fileIndex], status }
|
||||
|
||||
// 确保 percentage 是有效的数字（0-100）
|
||||
if (
|
||||
percentage !== null &&
|
||||
percentage >= 0 &&
|
||||
percentage <= 100
|
||||
) {
|
||||
updatedFile.percentage = percentage
|
||||
} else if (status === 'uploading') {
|
||||
// 上传中状态默认设置进度为 0
|
||||
updatedFile.percentage = 0
|
||||
} else if (status === 'success') {
|
||||
// 成功状态设置进度为 100
|
||||
updatedFile.percentage = 100
|
||||
}
|
||||
if (statusText) updatedFile.statusText = statusText
|
||||
if (percentage !== null) updatedFile.percentage = Math.max(0, Math.min(100, percentage))
|
||||
|
||||
if (responseData) {
|
||||
// 保存服务器返回的文件信息
|
||||
updatedFile.response = responseData;
|
||||
updatedFile.response.businessType =
|
||||
this.fileUploadRule?.fileUploadType;
|
||||
updatedFile.res = updatedFile.response;
|
||||
updatedFile.response = responseData
|
||||
updatedFile.response.businessType = this.fileUploadRule?.fileUploadType
|
||||
updatedFile.res = updatedFile.response
|
||||
}
|
||||
|
||||
// 使用 Vue.set 确保响应式更新
|
||||
this.$set(this.files, fileIndex, updatedFile)
|
||||
console.log('更新后的文件列表:', this.files)
|
||||
} else {
|
||||
console.warn('未找到要更新的文件:', fileUid)
|
||||
}
|
||||
},
|
||||
|
||||
// 处理文件超出限制
|
||||
handleExceed(files, fileList) {
|
||||
console.log('文件超出限制处理', files, fileList)
|
||||
// 当文件数量超出限制时，用新文件替换旧文件
|
||||
if (files.length > 0) {
|
||||
// 触发文件删除事件
|
||||
this.$emit('del-file', { ...fileList[0], response: fileList[0].res })
|
||||
|
||||
// 清空原有文件列表
|
||||
this.files = []
|
||||
|
||||
// 手动触发新文件的上传流程
|
||||
const newFile = files[0]
|
||||
// 创建新的文件对象，确保包含 percentage
|
||||
const newFileObj = {
|
||||
name: newFile.name,
|
||||
size: newFile.size,
|
||||
type: newFile.type,
|
||||
raw: newFile,
|
||||
uid: Date.now(), // 生成新的uid
|
||||
status: 'ready',
|
||||
percentage: 0, // 添加默认进度
|
||||
}
|
||||
|
||||
// 更新文件列表
|
||||
this.files = [newFileObj]
|
||||
|
||||
// 生成预览
|
||||
if (this.isImageFile(newFile)) {
|
||||
this.generateImagePreview(newFile)
|
||||
} else if (this.isDocumentFile(newFile)) {
|
||||
this.generateDocumentPreview(newFile)
|
||||
}
|
||||
|
||||
console.log('handleExceed 后的文件列表:', this.files)
|
||||
// 自动上传新文件
|
||||
if (this.autoUpload && !this.isUploading) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.upload.submit();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleRemove(file, fileList) {
|
||||
if (file == null) {
|
||||
this.clearPreview();
|
||||
return true;
|
||||
}
|
||||
// 如果正在上传中，阻止移除
|
||||
if (this.isUploading && file.status === 'uploading') {
|
||||
this.$message.warning('文件正在上传中，请稍后再删除');
|
||||
return false; // 阻止删除操作
|
||||
}
|
||||
// 根据剩余文件重新生成预览
|
||||
if (fileList.length === 0) {
|
||||
this.clearPreview();
|
||||
} else if (fileList.length === 1 && fileList[0] && fileList[0].raw) {
|
||||
if (this.isImageFile(fileList[0].raw)) {
|
||||
this.generateImagePreview(fileList[0].raw);
|
||||
} else if (this.isDocumentFile(fileList[0].raw)) {
|
||||
this.generateDocumentPreview(fileList[0].raw);
|
||||
}
|
||||
} else {
|
||||
this.clearPreview();
|
||||
}
|
||||
const delFileObj = this.findFileByRawFile(file.raw);
|
||||
delFileObj.response = delFileObj.res;
|
||||
// 更新文件列表
|
||||
this.files = this.formatFileList(fileList);
|
||||
// 触发文件删除事件给父组件
|
||||
this.$emit('del-file', delFileObj);
|
||||
// 传递当前文件信息给父组件
|
||||
this.$emit('file-change', this.getCurrentFiles(), this.type);
|
||||
// 返回 true 允许删除继续，false 阻止删除
|
||||
return true;
|
||||
},
|
||||
|
||||
// 格式化文件列表，确保数据结构正确
|
||||
formatFileList(fileList) {
|
||||
return fileList.map((file) => {
|
||||
// 创建一个标准的文件对象
|
||||
return fileList.map(file => {
|
||||
const formattedFile = {
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
|
|
@ -468,164 +388,148 @@ export default {
|
|||
raw: file.raw,
|
||||
}
|
||||
|
||||
// 确保 percentage 属性存在且有效
|
||||
// 处理进度
|
||||
if (file.percentage !== undefined && file.percentage !== null) {
|
||||
formattedFile.percentage = Math.max(
|
||||
0,
|
||||
Math.min(100, file.percentage),
|
||||
)
|
||||
} else if (file.status === 'uploading') {
|
||||
formattedFile.percentage = Math.max(0, Math.min(100, file.percentage))
|
||||
} else if (file.status === FILE_STATUS.UPLOADING) {
|
||||
formattedFile.percentage = 0
|
||||
} else if (file.status === 'success') {
|
||||
} else if (file.status === FILE_STATUS.SUCCESS) {
|
||||
formattedFile.percentage = 100
|
||||
}
|
||||
|
||||
// 保留其他可能存在的属性
|
||||
// 保留其他属性
|
||||
if (file.response) {
|
||||
formattedFile.response = file.response;
|
||||
formattedFile.res = file.response;
|
||||
}
|
||||
|
||||
if (file.filePath) {
|
||||
formattedFile.filePath = file.filePath;
|
||||
}
|
||||
|
||||
|
||||
if (file.statusText) {
|
||||
formattedFile.statusText = file.statusText
|
||||
formattedFile.response = file.response
|
||||
formattedFile.res = file.response
|
||||
}
|
||||
if (file.filePath) formattedFile.filePath = file.filePath
|
||||
if (file.statusText) formattedFile.statusText = file.statusText
|
||||
|
||||
return formattedFile
|
||||
})
|
||||
},
|
||||
|
||||
// 获取当前文件列表（确保是普通数组）
|
||||
getCurrentFiles() {
|
||||
const currentFiles = this.files.map((file) => {
|
||||
return this.files.map(file => {
|
||||
const fileObj = {
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
status: file.status,
|
||||
percentage: file.percentage || 0,
|
||||
}
|
||||
|
||||
// 确保 percentage 存在
|
||||
if (file.percentage !== undefined) {
|
||||
fileObj.percentage = file.percentage
|
||||
}
|
||||
|
||||
// 保留原始文件对象（如果存在）
|
||||
if (file.raw) {
|
||||
fileObj.raw = file.raw
|
||||
}
|
||||
|
||||
// 如果文件已上传成功，添加服务器返回的信息
|
||||
if (file.raw) fileObj.raw = file.raw
|
||||
if (file.response) {
|
||||
fileObj.response = file.response
|
||||
fileObj.response.businessType =
|
||||
this.fileUploadRule?.fileUploadType
|
||||
fileObj.response.businessType = this.fileUploadRule?.fileUploadType
|
||||
}
|
||||
|
||||
return fileObj
|
||||
})
|
||||
|
||||
return currentFiles
|
||||
},
|
||||
|
||||
createFileObject(file) {
|
||||
return {
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
raw: file,
|
||||
uid: Date.now(),
|
||||
status: FILE_STATUS.READY,
|
||||
percentage: 0,
|
||||
}
|
||||
},
|
||||
|
||||
// 判断是否为图片文件
|
||||
// 预览相关方法
|
||||
isImageFile(file) {
|
||||
return (
|
||||
(file && file.type && file.type.startsWith('image/')) ||
|
||||
(file && file.fileType === '1')
|
||||
)
|
||||
return (file && file.type && file.type.startsWith('image/')) || (file && file.fileType === FILE_TYPES.IMAGE)
|
||||
},
|
||||
// 判断是否为文档文件
|
||||
|
||||
isDocumentFile(file) {
|
||||
if (!file || !file.name) return false
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase()
|
||||
return (
|
||||
['pdf', 'doc', 'docx', 'xls', 'xlsx'].includes(fileExtension) ||
|
||||
(file && file.fileType === '2')
|
||||
)
|
||||
const fileExtension = this.getFileExtension(file.name)
|
||||
return ['pdf', 'doc', 'docx', 'xls', 'xlsx'].includes(fileExtension) ||
|
||||
(file && file.fileType === FILE_TYPES.DOCUMENT)
|
||||
},
|
||||
// 生成图片预览
|
||||
|
||||
updatePreview(fileList) {
|
||||
if (fileList.length === 0) {
|
||||
this.clearPreview()
|
||||
return
|
||||
}
|
||||
|
||||
if (fileList.length === 1 && fileList[0]) {
|
||||
const file = fileList[0].raw || fileList[0]
|
||||
if (this.isImageFile(file)) {
|
||||
fileList[0].lsFilePath ?
|
||||
this.generateImagePreviewFromPath(fileList[0]) :
|
||||
this.generateImagePreview(file)
|
||||
} else if (this.isDocumentFile(file)) {
|
||||
this.generateDocumentPreview(file)
|
||||
}
|
||||
} else {
|
||||
this.clearPreview()
|
||||
}
|
||||
},
|
||||
|
||||
generateImagePreview(file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
this.previewImageUrl = e.target.result
|
||||
this.previewImageName = file.name
|
||||
// 清除文档预览
|
||||
this.previewFileName = ''
|
||||
this.previewFileType = ''
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
},
|
||||
// 修改回显生成图片预览
|
||||
|
||||
generateImagePreviewFromPath(file) {
|
||||
this.previewImageUrl = file.lsFilePath
|
||||
this.previewImageName = file.name
|
||||
// 清除文档预览
|
||||
this.previewFileName = ''
|
||||
this.previewFileType = ''
|
||||
},
|
||||
// 生成文档预览
|
||||
|
||||
generateDocumentPreview(file) {
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase()
|
||||
this.previewFileName = file.name
|
||||
this.previewFileType = fileExtension
|
||||
// 清除图片预览
|
||||
this.previewFileType = this.getFileExtension(file.name)
|
||||
this.previewImageUrl = ''
|
||||
this.previewImageName = ''
|
||||
},
|
||||
// 清除预览
|
||||
|
||||
clearPreview() {
|
||||
this.previewImageUrl = ''
|
||||
this.previewImageName = ''
|
||||
this.previewFileName = ''
|
||||
this.previewFileType = ''
|
||||
},
|
||||
// 获取文件图标类型
|
||||
getFileIconClass() {
|
||||
const iconMap = {
|
||||
pdf: 'el-icon-document',
|
||||
doc: 'el-icon-document',
|
||||
docx: 'el-icon-document',
|
||||
xls: 'el-icon-document',
|
||||
xlsx: 'el-icon-document',
|
||||
|
||||
handlePreviewFromExternal(fileList) {
|
||||
if (fileList.length > 0) {
|
||||
const firstFile = fileList[0]
|
||||
if (firstFile?.lsFilePath) {
|
||||
this.isImageFile(firstFile) ?
|
||||
this.generateImagePreviewFromPath(firstFile) :
|
||||
this.generateDocumentPreview(firstFile)
|
||||
} else if (firstFile?.raw) {
|
||||
this.isImageFile(firstFile.raw) ?
|
||||
this.generateImagePreview(firstFile.raw) :
|
||||
this.generateDocumentPreview(firstFile.raw)
|
||||
} else {
|
||||
this.clearPreview()
|
||||
}
|
||||
} else {
|
||||
this.clearPreview()
|
||||
}
|
||||
return iconMap[this.previewFileType] || 'el-icon-document'
|
||||
},
|
||||
// 清空所有文件
|
||||
|
||||
clearFiles() {
|
||||
this.files = []
|
||||
this.clearPreview()
|
||||
this.$emit('file-change', [])
|
||||
},
|
||||
// 专门处理外部传入的文件预览
|
||||
handlePreviewFromExternal(fileList) {
|
||||
if (fileList.length > 0) {
|
||||
const firstFile = fileList[0]
|
||||
if (firstFile && firstFile.lsFilePath) {
|
||||
if (this.isImageFile(firstFile)) {
|
||||
this.generateImagePreviewFromPath(firstFile)
|
||||
} else if (this.isDocumentFile(firstFile)) {
|
||||
this.generateDocumentPreview(firstFile)
|
||||
}
|
||||
} else if (firstFile && firstFile.raw) {
|
||||
if (this.isImageFile(firstFile.raw)) {
|
||||
this.generateImagePreview(firstFile.raw)
|
||||
} else if (this.isDocumentFile(firstFile.raw)) {
|
||||
this.generateDocumentPreview(firstFile.raw)
|
||||
}
|
||||
} else {
|
||||
this.clearPreview()
|
||||
}
|
||||
} else {
|
||||
this.clearPreview()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue