功能优化
This commit is contained in:
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
title="上传素材"
|
||||
:width="600"
|
||||
:footer="false"
|
||||
@cancel="handleCancel"
|
||||
@update:visible="handleVisibleChange"
|
||||
>
|
||||
<div class="upload-modal-content">
|
||||
<!-- 文件上传区域 -->
|
||||
<div class="upload-area">
|
||||
<a-upload-dragger
|
||||
v-model:file-list="fileList"
|
||||
name="file"
|
||||
:multiple="true"
|
||||
:accept="acceptTypes"
|
||||
action=""
|
||||
:before-upload="handleBeforeUpload"
|
||||
:show-upload-list="false"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
<p class="ant-upload-drag-icon">
|
||||
<UploadOutlined />
|
||||
</p>
|
||||
<p class="ant-upload-text">点击或拖拽文件到此处上传</p>
|
||||
<p class="ant-upload-hint">
|
||||
支持多文件上传，单个文件不超过 500MB
|
||||
<br />
|
||||
支持格式：视频（MP4、MOV、AVI等）、图片（JPG、PNG、GIF等）、音频（MP3、WAV等）
|
||||
</p>
|
||||
</a-upload-dragger>
|
||||
</div>
|
||||
|
||||
<!-- 已选文件列表 -->
|
||||
<div v-if="fileList.length > 0" class="upload-file-list">
|
||||
<div class="upload-file-list-title">已选择 {{ fileList.length }} 个文件</div>
|
||||
<div class="upload-file-items">
|
||||
<div
|
||||
v-for="(fileItem, index) in fileList"
|
||||
:key="fileItem.uid || index"
|
||||
class="upload-file-item"
|
||||
>
|
||||
<FileOutlined class="file-icon" />
|
||||
<span class="file-name">{{ getFileName(fileItem) }}</span>
|
||||
<span class="file-size">{{ formatFileSize(getFileSize(fileItem)) }}</span>
|
||||
<a-button
|
||||
type="text"
|
||||
status="danger"
|
||||
size="small"
|
||||
@click="handleRemove(fileItem)"
|
||||
>
|
||||
删除
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="upload-actions">
|
||||
<a-space>
|
||||
<a-button @click="handleCancel">取消</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="uploading"
|
||||
:disabled="fileList.length === 0 || !fileCategory"
|
||||
@click="handleConfirm"
|
||||
>
|
||||
{{ uploading ? '上传中...' : `上传 (${fileList.length})` }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { UploadOutlined, FileOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
uploading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'confirm', 'cancel'])
|
||||
|
||||
// 数据
|
||||
const fileList = ref([])
|
||||
const fileCategory = ref('video') // 文件分类，默认为视频集
|
||||
|
||||
// 支持的文件类型
|
||||
const acceptTypes = 'video/*,image/*,audio/*,.mp4,.mov,.avi,.mkv,.jpg,.jpeg,.png,.gif,.webp,.mp3,.wav,.aac'
|
||||
|
||||
// 监听 visible 变化，重置文件列表和分类
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (!newVal) {
|
||||
fileList.value = []
|
||||
fileCategory.value = 'video' // 重置为默认分类
|
||||
}
|
||||
})
|
||||
|
||||
// 获取文件名
|
||||
const getFileName = (fileItem) => {
|
||||
if (fileItem instanceof File) {
|
||||
return fileItem.name
|
||||
}
|
||||
return fileItem.name || fileItem.file?.name || fileItem.originFileObj?.name || '未知文件'
|
||||
}
|
||||
|
||||
// 获取文件大小
|
||||
const getFileSize = (fileItem) => {
|
||||
if (fileItem instanceof File) {
|
||||
return fileItem.size
|
||||
}
|
||||
return fileItem.size || fileItem.file?.size || fileItem.originFileObj?.size || 0
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
const formatFileSize = (bytes) => {
|
||||
if (!bytes) return '0 B'
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
// 上传前处理
|
||||
const handleBeforeUpload = (file) => {
|
||||
// 检查文件大小（500MB）
|
||||
if (file.size > 500 * 1024 * 1024) {
|
||||
message.warning(`文件 ${file.name} 超过 500MB，已跳过`)
|
||||
return false
|
||||
}
|
||||
|
||||
// 检查是否已存在相同文件（使用当前的 fileList）
|
||||
const exists = fileList.value.some(item => {
|
||||
const itemName = getFileName(item)
|
||||
const itemSize = getFileSize(item)
|
||||
return itemName === file.name && itemSize === file.size
|
||||
})
|
||||
if (exists) {
|
||||
message.warning(`文件 ${file.name} 已存在，已跳过`)
|
||||
return false
|
||||
}
|
||||
|
||||
// 阻止自动上传，文件会通过 change 事件添加到列表
|
||||
return false
|
||||
}
|
||||
|
||||
// 文件列表变化
|
||||
const handleFileChange = (info) => {
|
||||
// 使用 v-model:file-list 后，fileList 会自动更新
|
||||
// 这里只需要处理文件验证和状态
|
||||
const { file, fileList: newFileList } = info
|
||||
|
||||
if (file && file.status !== 'uploading') {
|
||||
// 确保文件对象正确保存
|
||||
fileList.value = newFileList.map(item => {
|
||||
if (!item.file && item.originFileObj) {
|
||||
item.file = item.originFileObj
|
||||
}
|
||||
return item
|
||||
}).filter(item => item.status !== 'removed')
|
||||
}
|
||||
}
|
||||
|
||||
// 移除文件
|
||||
const handleRemove = (fileItem) => {
|
||||
const index = fileList.value.findIndex(item =>
|
||||
(item.uid && item.uid === fileItem.uid) ||
|
||||
(getFileName(item) === getFileName(fileItem))
|
||||
)
|
||||
if (index > -1) {
|
||||
fileList.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 确认上传
|
||||
const handleConfirm = () => {
|
||||
if (fileList.value.length === 0) {
|
||||
message.warning('请选择文件')
|
||||
return
|
||||
}
|
||||
|
||||
// 提取文件对象，优先使用 file，其次 originFileObj，最后是 item 本身
|
||||
const files = fileList.value
|
||||
.map(item => {
|
||||
// 优先使用 file 属性
|
||||
if (item.file instanceof File) {
|
||||
return item.file
|
||||
}
|
||||
// 其次使用 originFileObj
|
||||
if (item.originFileObj instanceof File) {
|
||||
return item.originFileObj
|
||||
}
|
||||
// 最后尝试 item 本身（如果是 File 对象）
|
||||
if (item instanceof File) {
|
||||
return item
|
||||
}
|
||||
return null
|
||||
})
|
||||
.filter(file => file instanceof File)
|
||||
|
||||
if (files.length === 0) {
|
||||
message.error('无法获取文件对象，请重新选择文件')
|
||||
return
|
||||
}
|
||||
|
||||
if (!fileCategory.value) {
|
||||
message.warning('请选择文件分类')
|
||||
return
|
||||
}
|
||||
|
||||
emit('confirm', files, fileCategory.value)
|
||||
}
|
||||
|
||||
// 处理 visible 变化
|
||||
const handleVisibleChange = (value) => {
|
||||
emit('update:visible', value)
|
||||
}
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false)
|
||||
emit('cancel')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-modal-content {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.upload-category-select {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.upload-label {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.upload-file-list {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.upload-file-list-title {
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.upload-file-items {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.upload-file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.upload-file-item:hover {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 20px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: var(--color-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.upload-actions {
|
||||
text-align: right;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.upload-tips {
|
||||
font-size: 12px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.upload-tips > div {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user