更新
This commit is contained in:
314
src/pages/system/setting/index.vue
Normal file
314
src/pages/system/setting/index.vue
Normal file
@@ -0,0 +1,314 @@
|
||||
<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/ImageUpload/index.vue'
|
||||
import FileUpload from '@/components/FileUpload/index.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>
|
||||
Reference in New Issue
Block a user