前言

🤟 找工作，來萬碼優才：👉 #小程序://萬碼優才/r6rqmzDaXpYkJZF

爬蟲神器，無代碼爬取，就來：bright.cn

此處的基本知識涉及較少，主要以Demo的形式供大家學習，從實戰中觸發

本身url是在線鏈接且是以數組的形式存在

開源項目來源：https://gitee.com/zhijiantianya/ruoyi-vue-pro

1. Demo1

本身一開始以Minio的形式上傳，以文件的形式進行命名：

后續用戶需要一個個點擊才能看到是什么文件

 <el-form-item label="單證附件" prop="imgPath"><UploadFile v-model="formData.imgPath" limit="10" /></el-form-item>

1. 把 imgPath 按逗號分割為數組

2. 遍歷數組，每個鏈接：
   如果是圖片（比如后綴是 .jpg、.png 等），就渲染成 <el-image>
   如果不是圖片，就渲染成帶下載鏈接的文件名

示例的Demo如下：

<template><div class="file-preview-list"><divv-for="(item, index) in fileList":key="index"class="preview-item"><el-imagev-if="isImage(item)":src="item":preview-src-list="[item]"fit="cover"style="width: 100px; height: 100px; margin-right: 10px;"><template #error><div style="font-size: 12px; color: #999;">加載失敗</div></template></el-image><av-else:href="item"target="_blank"style="color: #409EFF; text-decoration: underline;">文件 {{ index + 1 }}</a></div></div>
</template><script setup>
import { computed } from 'vue';const props = defineProps({modelValue: String
});const fileList = computed(() => {return props.modelValue? props.modelValue.split(',').map(item => item.trim()): [];
});const isImage = (url) => {return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
};
</script><style scoped>
.file-preview-list {display: flex;flex-wrap: wrap;gap: 10px;
}
.preview-item {display: flex;align-items: center;
}
</style>

組件這樣使用：

<el-form-item label="單證附件" prop="imgPath"><UploadFile v-model="formData.imgPath" limit="10" /><UploadPreview v-model="formData.imgPath" />
</el-form-item>

后續由于圖片有些過大，對應以正在加載的形式呈現：

<template><div class="file-preview-list"><divv-for="(item, index) in fileList":key="index"class="preview-item"><el-imagev-if="isImage(item)":src="item":preview-src-list="[item]"fit="cover"style="width: 100px; height: 100px; margin-right: 10px;"><template #placeholder><divstyle="display: flex; align-items: center; justify-content: center; height: 100%; color: #aaa; font-size: 12px;">正在加載...</div></template><template #error><div style="font-size: 12px; color: #999;">加載失敗</div></template></el-image><av-else:href="item"target="_blank"style="color: #409EFF; text-decoration: underline;">文件 {{ index + 1 }}</a></div></div>
</template><script setup>
import { computed } from 'vue';const props = defineProps({modelValue: String
});const fileList = computed(() => {return props.modelValue? props.modelValue.split(',').map(item => item.trim()): [];
});const isImage = (url) => {return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
};
</script><style scoped>
.file-preview-list {display: flex;flex-wrap: wrap;gap: 10px;
}
.preview-item {display: flex;align-items: center;
}
</style>

? 推薦結構（用 el-row + 兩個 el-col）
原來的結構是把所有內容都放在了一個 el-form-item 里面，這樣不太好控制布局

建議改成下面這樣：

<el-row><!-- 左側：上傳控件 --><el-col :span="12"><el-form-item label="單證附件" prop="imgPath"><UploadFile v-model="formData.imgPath" limit="10" /></el-form-item></el-col><el-col :span="12"><div style="margin-bottom: 8px; font-weight: bold;">附件預覽</div><UploadPreview v-model="formData.imgPath" /></el-col>
</el-row>

最終截圖如下：

2. Demo2

另外一種呈現的方式如下：

<el-table-column label="照片" align="center" prop="imgPath" width="500" fixed="left"><template #default="{ row }"><div v-if="row.imgPath && row.imgPath.length > 0" class="damage-images"><el-imagev-for="(img, index) in row.imgPath":key="index"class="h-80px w-80px"lazy:src="img":preview-src-list="row.imgPath"preview-teleportedfit="cover"/></div><div v-else class="no-image">無圖片</div></template>
</el-table-column>