118 lines
3.6 KiB
Vue
118 lines
3.6 KiB
Vue
<template>
|
||
<div class="image-upload-test">
|
||
<el-card header="ImageUpload组件测试 - 认证图片回显和预览">
|
||
<el-form :model="form" label-width="120px">
|
||
<el-form-item label="测试数据1">
|
||
<el-button @click="loadTestData1" type="primary">加载单个OSS ID</el-button>
|
||
<span style="margin-left: 10px; color: #666;">测试单个OSS文件回显</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="测试数据2">
|
||
<el-button @click="loadTestData2" type="primary">加载多个OSS ID</el-button>
|
||
<span style="margin-left: 10px; color: #666;">测试多个OSS文件回显</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="测试数据3">
|
||
<el-button @click="loadTestData3" type="primary">加载URL格式</el-button>
|
||
<span style="margin-left: 10px; color: #666;">测试直接URL回显</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="清空数据">
|
||
<el-button @click="clearData" type="danger">清空</el-button>
|
||
<span style="margin-left: 10px; color: #666;">清空所有图片数据</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="当前值">
|
||
<el-input v-model="form.images" type="textarea" :rows="3" readonly />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="图片上传">
|
||
<ImageUpload v-model="form.images" :limit="5" />
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<div class="test-info">
|
||
<h3>测试说明</h3>
|
||
<ul>
|
||
<li><strong>功能验证</strong>：
|
||
<ol>
|
||
<li>界面打开时历史图片是否正常显示（通过认证接口获取blob URL）</li>
|
||
<li>点击图片预览是否正常工作</li>
|
||
<li>上传新图片功能是否正常</li>
|
||
<li>删除图片功能是否正常</li>
|
||
</ol>
|
||
</li>
|
||
<li><strong>技术要点</strong>：
|
||
<ul>
|
||
<li>使用 Promise.all 并行处理多个文件的blob URL转换</li>
|
||
<li>缓存机制避免重复请求相同图片的认证数据</li>
|
||
<li>降级处理：认证失败时使用原始URL</li>
|
||
<li>完整的blob URL生命周期管理，防止内存泄漏</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>错误处理</strong>：如果图片无法显示，检查控制台错误信息</li>
|
||
</ul>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue';
|
||
import ImageUpload from '@/components/ImageUpload/index.vue';
|
||
|
||
const form = reactive({
|
||
images: ''
|
||
});
|
||
|
||
// 测试数据1：单个OSS ID
|
||
const loadTestData1 = () => {
|
||
form.images = '1951584287279034370'; // 示例OSS ID，实际使用时需要替换为有效的OSS ID
|
||
};
|
||
|
||
// 测试数据2：多个OSS ID
|
||
const loadTestData2 = () => {
|
||
form.images = '1951584287279034370,1951584287279034371'; // 示例多个OSS ID
|
||
};
|
||
|
||
// 测试数据3：URL格式
|
||
const loadTestData3 = () => {
|
||
form.images = '/resource/oss/download/1951584287279034370'; // 示例OSS下载URL
|
||
};
|
||
|
||
// 清空数据
|
||
const clearData = () => {
|
||
form.images = '';
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.image-upload-test {
|
||
padding: 20px;
|
||
|
||
.test-info {
|
||
margin-top: 30px;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
border-radius: 4px;
|
||
|
||
h3 {
|
||
margin-top: 0;
|
||
color: #333;
|
||
}
|
||
|
||
ul, ol {
|
||
margin-left: 20px;
|
||
|
||
li {
|
||
margin-bottom: 8px;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
strong {
|
||
color: #409EFF;
|
||
}
|
||
}
|
||
}
|
||
</style> |