315 lines
7.2 KiB
Vue
315 lines
7.2 KiB
Vue
<template>
|
||
<div class="upload-demo">
|
||
<a-card title="图片上传组件示例" class="demo-card">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="单图上传">
|
||
<ImageUpload v-model="singleImage" />
|
||
<div class="result">
|
||
<strong>结果：</strong>
|
||
<p>{{ singleImage || '暂无图片' }}</p>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="多图上传（最多5张）">
|
||
<ImageUpload
|
||
v-model="multipleImages"
|
||
:max-count="5"
|
||
@change="handleImageChange"
|
||
/>
|
||
<div class="result">
|
||
<strong>结果：</strong>
|
||
<p v-if="multipleImages.length > 0">
|
||
{{ multipleImages.join(', ') }}
|
||
</p>
|
||
<p v-else>暂无图片</p>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
|
||
<a-card title="图片尺寸限制示例" class="demo-card">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="限制图片尺寸 800x600">
|
||
<ImageUpload
|
||
v-model="sizeImage"
|
||
:min-width="800"
|
||
:max-width="1920"
|
||
:min-height="600"
|
||
:max-height="1080"
|
||
tip="尺寸要求：800x600 ~ 1920x1080"
|
||
/>
|
||
<div class="result">
|
||
<strong>结果：</strong>
|
||
<p>{{ sizeImage || '暂无图片' }}</p>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="自定义上传文字">
|
||
<ImageUpload
|
||
v-model="customImage"
|
||
upload-text="点击选择图片"
|
||
tip="支持 JPG、PNG 格式，最大 10MB"
|
||
/>
|
||
<div class="result">
|
||
<strong>结果：</strong>
|
||
<p>{{ customImage || '暂无图片' }}</p>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
|
||
<a-card title="上传事件监听示例" class="demo-card">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="监听上传事件">
|
||
<ImageUpload
|
||
v-model="eventImage"
|
||
@upload-success="handleUploadSuccess"
|
||
@upload-error="handleUploadError"
|
||
@preview="handlePreview"
|
||
/>
|
||
<div class="result">
|
||
<strong>结果：</strong>
|
||
<p>{{ eventImage || '暂无图片' }}</p>
|
||
<p v-if="eventLog" class="event-log">
|
||
<strong>事件日志：</strong>
|
||
<pre>{{ eventLog }}</pre>
|
||
</p>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
|
||
<a-card title="文件上传组件示例" class="demo-card">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="单文件上传">
|
||
<FileUpload v-model="singleFile" />
|
||
<div class="result">
|
||
<strong>结果：</strong>
|
||
<p>{{ singleFile || '暂无文件' }}</p>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="多文件上传">
|
||
<FileUpload
|
||
v-model="multipleFiles"
|
||
:max-count="10"
|
||
:multiple="true"
|
||
@change="handleFileChange"
|
||
@remove="handleFileRemove"
|
||
/>
|
||
<div class="result">
|
||
<strong>结果：</strong>
|
||
<p v-if="multipleFiles.length > 0">
|
||
{{ multipleFiles.join(', ') }}
|
||
</p>
|
||
<p v-else>暂无文件</p>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
|
||
<a-card title="限制文件类型示例" class="demo-card">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="仅支持 JPG/PNG 图片">
|
||
<ImageUpload
|
||
v-model="jpgImage"
|
||
accept="image/jpeg,image/png"
|
||
/>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="仅支持 PDF/Word 文档">
|
||
<FileUpload
|
||
v-model="documentFile"
|
||
accept=".pdf,.doc,.docx"
|
||
/>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
|
||
<a-card title="禁用状态示例" class="demo-card">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="禁用图片上传">
|
||
<ImageUpload
|
||
v-model="disabledImage"
|
||
:disabled="true"
|
||
/>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="禁用文件上传">
|
||
<FileUpload
|
||
v-model="disabledFile"
|
||
:disabled="true"
|
||
/>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
|
||
<a-card title="返回完整文件列表示例" class="demo-card">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<a-card type="inner" title="返回完整文件对象">
|
||
<ImageUpload
|
||
v-model="fullFileList"
|
||
:return-url="false"
|
||
@change="handleFullListChange"
|
||
/>
|
||
<div class="result">
|
||
<strong>完整文件列表：</strong>
|
||
<pre>{{ JSON.stringify(fullFileList, null, 2) }}</pre>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import ImageUpload from '@/components/scUpload/index.vue'
|
||
import FileUpload from '@/components/scUpload/file.vue'
|
||
|
||
// 单图上传
|
||
const singleImage = ref('')
|
||
|
||
// 多图上传
|
||
const multipleImages = ref([])
|
||
|
||
// 单文件上传
|
||
const singleFile = ref('')
|
||
|
||
// 多文件上传
|
||
const multipleFiles = ref([])
|
||
|
||
// 限制类型
|
||
const jpgImage = ref('')
|
||
const documentFile = ref('')
|
||
|
||
// 禁用状态
|
||
const disabledImage = ref('')
|
||
const disabledFile = ref('')
|
||
|
||
// 完整文件列表
|
||
const fullFileList = ref([])
|
||
|
||
// 新增示例
|
||
const sizeImage = ref('')
|
||
const customImage = ref('')
|
||
const eventImage = ref('')
|
||
const eventLog = ref('')
|
||
|
||
// 图片变化事件
|
||
const handleImageChange = (value, fileList) => {
|
||
console.log('图片URL数组:', value)
|
||
console.log('完整文件列表:', fileList)
|
||
}
|
||
|
||
// 文件变化事件
|
||
const handleFileChange = (value, fileList) => {
|
||
console.log('文件URL数组:', value)
|
||
console.log('完整文件列表:', fileList)
|
||
}
|
||
|
||
// 文件移除事件
|
||
const handleFileRemove = (file) => {
|
||
console.log('移除的文件:', file)
|
||
}
|
||
|
||
// 完整文件列表变化事件
|
||
const handleFullListChange = (value, fileList) => {
|
||
console.log('完整文件列表:', fileList)
|
||
}
|
||
|
||
// 上传成功事件
|
||
const handleUploadSuccess = (data, file) => {
|
||
eventLog.value = `上传成功\n文件名: ${file.name}\n响应数据: ${JSON.stringify(data, null, 2)}`
|
||
console.log('上传成功:', data, file)
|
||
}
|
||
|
||
// 上传失败事件
|
||
const handleUploadError = (errorMsg, file) => {
|
||
eventLog.value = `上传失败\n文件名: ${file.name}\n错误信息: ${errorMsg}`
|
||
console.log('上传失败:', errorMsg, file)
|
||
}
|
||
|
||
// 预览事件
|
||
const handlePreview = (file) => {
|
||
eventLog.value = `预览图片\n文件名: ${file.name}\n状态: ${file.status}`
|
||
console.log('预览文件:', file)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.upload-demo {
|
||
padding: 24px;
|
||
}
|
||
|
||
.demo-card {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.demo-card :deep(.ant-card-body) {
|
||
padding: 24px;
|
||
}
|
||
|
||
.demo-card :deep(.ant-card-head-title) {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.result {
|
||
margin-top: 16px;
|
||
padding: 12px;
|
||
background-color: #f5f5f5;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.result p {
|
||
margin: 8px 0 0 0;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.result pre {
|
||
margin: 8px 0 0 0;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
background: #fff;
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.event-log {
|
||
margin-top: 12px !important;
|
||
padding: 8px !important;
|
||
background-color: #f0f2f5 !important;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.event-log pre {
|
||
margin: 8px 0 0 0;
|
||
max-height: 150px;
|
||
overflow-y: auto;
|
||
background: #fff;
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
}
|
||
</style>
|