一、数据格式用数组存起来:测试数据上传了一张图片和一个文档
二、UI显示
<el-table-column prop="files" label="月度文件下载">
<div slot-scope="{ row }">
<div v-if="row.files">
<div v-for="(item, index) in row.files" :key="index">
<div v-if="isImgFile(item)">
<el-popover placement="left" trigger="click" width="400">
<img
:src="baseUrl + '/file/download?filePath=' + item"
width="100%"
/>
<img
slot="reference"
:src="baseUrl + '/file/download?filePath=' + item"
alt="暂无文件"
style="
max-height: 70px;
max-width: 70px;
padding: 5px;
cursor: pointer;
"
/>
</el-popover>
</div>
<div v-else>
<el-link class="linkCss" @click="downLoadfile(item)">{{
item
}}</el-link>
</div>
</div>
</div>
<div v-else>
<span>暂未上传</span>
</div>
</div>
</el-table-column>
三、后台拿到的数据是json字符串 转成json对象 用点.属性 点出来
拿到数组对象的jsonData属性转成json对象 获取file数据 逗号截取存成数组
// 获取数据
getData(data) {
getMonthProductdata(data).then(val => {
if (val.code === 200) {
this.tableData = val.data.list
if (this.tableData.length == 0) {
this.$message.warning('暂无数据')
} else {
var imageUrls = []
val.data.list.map(item => {
if (item.jsonData) {
var fileArr = JSON.parse(item.jsonData)
if (fileArr.file) {
imageUrls = fileArr.file.split(',')
item.files = imageUrls //新增file属性 存数组进去,在界面循环展示
}
}
})
}
console.log(this.tableData, 'tableData')
}
}).catch((res) => {
this.$message.error(res);
});
},
四、判断是图片还是文件:在界面循环展示的时候引用这个方法 图片返回true
isImgFile(fileName) {
// console.log(fileName, 'fileName')
//后缀获取
let suffix = '';
// 获取类型结果
let result = '';
const flieArr = fileName.split('.');
suffix = flieArr[flieArr.length - 1];
if (suffix != "") {
suffix = suffix.toLocaleLowerCase();
// 图片格式
const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
// 进行图片匹配
result = imglist.find(item => item === suffix);
if (result) {
return true;
}
}
return false;
},
五、图片的展示用image展示,文档的话用链接点击就下载
downLoadfile(fileName) {
let url = process.env.VUE_APP_BASE_API + '/file/download?filePath=' + fileName
window.location.href = url
},
示例:表格展示样式可以自行调调