From 0204d3e40681c2a4f50df373012d8cb226d98966 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 20 六月 2025 16:03:12 +0800
Subject: [PATCH] 修改bug
---
laboratory/src/components/DynamicComponent/index.vue | 51 +++++++++++++++++++++++++--------------------------
1 files changed, 25 insertions(+), 26 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/index.vue b/laboratory/src/components/DynamicComponent/index.vue
index 7a1ff5e..6e54fb5 100644
--- a/laboratory/src/components/DynamicComponent/index.vue
+++ b/laboratory/src/components/DynamicComponent/index.vue
@@ -36,7 +36,7 @@
<!-- 图片类型显示 -->
<template v-else-if="header.type === 'image'">
<img v-if="scope.row[header.name]"
- :src="scope.row[header.name]"
+ :src="getFullUrl(scope.row[header.name])"
alt="头像"
class="table-image" />
</template>
@@ -57,8 +57,10 @@
</div>
<!-- 文件上传 -->
<div v-else-if="item.type == 'fileUpload'">
- <el-upload v-if="editable" action="#" :file-list="item.data.fileList"
- :on-change="(file, fileList) => handleFileChange(idx, fileList)" list-type="text">
+ <el-upload v-if="editable" :http-request="customUploadRequest" :file-list="item.data.fileList"
+ :on-change="(file, fileList) => handleFileChange(idx, fileList)"
+ :on-success="(res, file, fileList) => handleFileSuccess(res, file, fileList, idx)"
+ list-type="text">
<el-button size="small" icon="el-icon-upload2">点击上传</el-button>
</el-upload>
<div v-else>
@@ -70,11 +72,10 @@
<!-- 图片上传 -->
<div v-else-if="item.type == 'imageUpload'">
<div class="image-upload-container">
- <el-upload v-if="editable" action="#" :file-list="item.data.imageList"
+ <el-upload v-if="editable" :http-request="customUploadRequest" :file-list="item.data.imageList"
:on-change="(file, fileList) => handleImageChange(idx, fileList)"
:on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, idx)"
:auto-upload="true"
- :http-request="() => { }"
:before-upload="beforeImageUpload"
list-type="picture-card"
:on-preview="(file) => handlePreview(file, idx)"
@@ -85,8 +86,8 @@
<div v-else class="image-preview">
<el-image v-for="image in item.data.imageList"
:key="image.uid"
- :src="image.url"
- :preview-src-list="item.data.imageList.map(img => img.url)"
+ :src="getFullUrl(image.url)"
+ :preview-src-list="item.data.imageList.map(img => getFullUrl(img.url))"
class="preview-image" />
</div>
<div class="uploaf-notice">支持.jpg .png格式</div>
@@ -116,6 +117,8 @@
import Table from "../Table/index.vue";
import addTableHeader from "./addTableHeader.vue";
import addTableData from "./addTableData.vue";
+import apiConfig from '../../utils/baseurl'
+import { customUploadRequest, getFullUrl } from '@/utils/utils'
export default {
name: "DynamicComponent",
@@ -150,6 +153,7 @@
},
data() {
return {
+ apiConfig:apiConfig,
showAddDialog: false,
components: [],
tableHeaderDialog: {
@@ -439,34 +443,27 @@
},
handleFileChange(idx, fileList) {
if (!this.editable) return;
-
- fileList = fileList.map(file => {
- if (!file.url) {
- file.url = 'https://picsum.photos/200/200';
- }
- if (!file.name) {
- file.name = '默认文件.txt';
- }
- return file;
- });
+ // 只做 fileList 同步
+ this.components[idx].data.fileList = fileList;
+ this.emitUpdate();
+ },
+ handleFileSuccess(res, file, fileList, idx) {
+ // 上传成功后设置真实 url
+ file.url = res.data.url;
this.components[idx].data.fileList = fileList;
this.emitUpdate();
},
handleImageChange(idx, fileList) {
if (!this.editable) return;
-
- fileList = fileList.map(file => {
- if (!file.url) {
- file.url = 'https://picsum.photos/200/200';
- }
- return file;
- });
+ // 只做 imageList 同步
this.components[idx].data.imageList = fileList;
this.emitUpdate();
},
handleImageSuccess(res, file, fileList, idx) {
- file.url = 'https://picsum.photos/200/200';
+ // 上传成功后设置真实 url
+ file.url = res.data.url;
this.components[idx].data.imageList = fileList;
+ this.emitUpdate();
},
beforeImageUpload(file) {
const isJPG = file.type === 'image/jpeg';
@@ -487,7 +484,7 @@
// 使用el-image的preview-src-list实现预览
// 这里直接用Element的图片预览能力，实际上el-upload会自动处理
// 但如果你想自定义弹窗，可以用如下代码：
- this.imagePreviewUrl = file.url;
+ this.imagePreviewUrl = this.getFullUrl(file.url);
this.imagePreviewVisible = true;
},
emitUpdate() {
@@ -496,6 +493,8 @@
this.$emit('update:dataSource', updatedComponents);
},
},
+ computed: {
+ },
};
</script>
--
Gitblit v1.7.1