tyapi-frontend/src/pages/FileUploadTest.vue

<template>
  <div class="file-upload-test">
    <el-card class="test-card">
      <template #header>
        <div class="card-header">
          <h2>文件上传组件测试</h2>
          <p>测试通用文件上传组件的各种功能</p>
        </div>
      </template>

      <div class="test-content">
        <!-- 图片上传测试 -->
        <div class="test-section">
          <h3>图片上传</h3>
          <FileUpload
            v-model="imageFile"
            accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
            :max-size="5"
            title="上传图片"
            description="支持 JPG/PNG/GIF/WEBP 格式，文件大小不超过 5MB"
            @change="handleImageChange"
            @remove="handleImageRemove"
          />
          <div class="file-info" v-if="imageFile">
            <p><strong>文件名:</strong> {{ imageFile.name }}</p>
            <p><strong>文件大小:</strong> {{ (imageFile.size / 1024 / 1024).toFixed(2) }} MB</p>
            <p><strong>文件类型:</strong> {{ imageFile.type }}</p>
          </div>
        </div>

        <!-- 文档上传测试 -->
        <div class="test-section">
          <h3>文档上传</h3>
          <FileUpload
            v-model="documentFile"
            accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            :max-size="20"
            title="上传文档"
            description="支持 PDF/DOC/DOCX 格式，文件大小不超过 20MB"
            @change="handleDocumentChange"
            @remove="handleDocumentRemove"
          />
          <div class="file-info" v-if="documentFile">
            <p><strong>文件名:</strong> {{ documentFile.name }}</p>
            <p><strong>文件大小:</strong> {{ (documentFile.size / 1024 / 1024).toFixed(2) }} MB</p>
            <p><strong>文件类型:</strong> {{ documentFile.type }}</p>
          </div>
        </div>

        <!-- 任意文件上传测试 -->
        <div class="test-section">
          <h3>任意文件上传</h3>
          <FileUpload
            v-model="anyFile"
            accept="*/*"
            :max-size="50"
            title="上传任意文件"
            description="支持所有文件类型，文件大小不超过 50MB"
            @change="handleAnyFileChange"
            @remove="handleAnyFileRemove"
          />
          <div class="file-info" v-if="anyFile">
            <p><strong>文件名:</strong> {{ anyFile.name }}</p>
            <p><strong>文件大小:</strong> {{ (anyFile.size / 1024 / 1024).toFixed(2) }} MB</p>
            <p><strong>文件类型:</strong> {{ anyFile.type }}</p>
          </div>
        </div>

        <!-- 禁用状态测试 -->
        <div class="test-section">
          <h3>禁用状态</h3>
          <FileUpload
            v-model="disabledFile"
            accept="image/jpeg,image/jpg,image/png"
            :max-size="4"
            title="禁用状态"
            description="此上传组件已被禁用"
            :disabled="true"
          />
        </div>

        <!-- 操作按钮 -->
        <div class="test-actions">
          <el-button type="primary" @click="clearAllFiles">清空所有文件</el-button>
          <el-button type="success" @click="showFileInfo">显示文件信息</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import FileUpload from '@/components/common/FileUpload.vue'
import { ElMessage } from 'element-plus'

// 文件状态
const imageFile = ref(null)
const documentFile = ref(null)
const anyFile = ref(null)
const disabledFile = ref(null)

// 处理图片文件变化
const handleImageChange = (file) => {
  ElMessage.success('图片文件已选择')
  console.log('图片文件:', file)
}

// 处理图片文件删除
const handleImageRemove = () => {
  ElMessage.info('图片文件已删除')
}

// 处理文档文件变化
const handleDocumentChange = (file) => {
  ElMessage.success('文档文件已选择')
  console.log('文档文件:', file)
}

// 处理文档文件删除
const handleDocumentRemove = () => {
  ElMessage.info('文档文件已删除')
}

// 处理任意文件变化
const handleAnyFileChange = (file) => {
  ElMessage.success('文件已选择')
  console.log('任意文件:', file)
}

// 处理任意文件删除
const handleAnyFileRemove = () => {
  ElMessage.info('文件已删除')
}

// 清空所有文件
const clearAllFiles = () => {
  imageFile.value = null
  documentFile.value = null
  anyFile.value = null
  disabledFile.value = null
  ElMessage.success('所有文件已清空')
}

// 显示文件信息
const showFileInfo = () => {
  const files = []
  if (imageFile.value) files.push(`图片: ${imageFile.value.name}`)
  if (documentFile.value) files.push(`文档: ${documentFile.value.name}`)
  if (anyFile.value) files.push(`文件: ${anyFile.value.name}`)

  if (files.length > 0) {
    ElMessage.success(`已选择的文件: ${files.join(', ')}`)
  } else {
    ElMessage.info('没有选择任何文件')
  }
}
</script>

<style scoped>
.file-upload-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0 0 8px 0;
  color: #1e293b;
  font-size: 24px;
  font-weight: 700;
}

.card-header p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.test-content {
  padding: 20px 0;
}

.test-section {
  margin-bottom: 40px;
  padding: 24px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.test-section h3 {
  margin: 0 0 16px 0;
  color: #1e293b;
  font-size: 18px;
  font-weight: 600;
}

.file-info {
  margin-top: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.file-info p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #374151;
}

.file-info p:last-child {
  margin-bottom: 0;
}

.test-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .file-upload-test {
    padding: 10px;
  }

  .test-section {
    padding: 16px;
    margin-bottom: 24px;
  }

  .test-actions {
    flex-direction: column;
    gap: 12px;
  }
}
</style>