element-plus中 el-image :src属性发送get请求项目场景：问题描述：原因分析：

159 阅读 0 评论 105 点赞

我是靠谱客的博主舒适舞蹈，这篇文章主要介绍element-plus中 el-image :src属性发送get请求项目场景：问题描述：原因分析：，现在分享给大家，希望可以做个参考。

项目场景：

Element-plus 中

复制代码

1
2
3
4

<el-image :src="scope.row.cover" style="height: 100px" :preview-src-list="[scope.row.cover]">
</el-image>

:src发送的Get请求问题

问题描述：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12

<el-table-column label="封面" prop="cover" #default="scope">
<!--
<el-image :src="scope.row.cover" style="height: 100px" :preview-src-list="[scope.row.cover]">-->
<!--
</el-image>-->
<!--
查看数据库内容
-->
<div>{{scope.row.cover}}</div>
</el-table-column>

在这里插入图片描述

后台内容为

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

@GetMapping("/{flag}")
public void getFiles(@PathVariable String flag, HttpServletResponse response) {
OutputStream os;
// 新建一个输出流对象
String basePath = System.getProperty("user.dir") + "/springboot/src/main/resources/files/";
// 定于文件上传的根路径
List<String> fileNames = FileUtil.listFileNames(basePath);
// 获取所有的文件名称
String fileName = fileNames.stream().filter(name -> name.contains(flag)).findAny().orElse("");
// 找到跟参数一致的文件
System.out.println(flag);
try {
if (StrUtil.isNotEmpty(fileName)) {
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
response.setContentType("application/octet-stream");
byte[] bytes = FileUtil.readBytes(basePath + fileName);
// 通过文件的路径读取文件字节流
os = response.getOutputStream();
// 通过输出流返回文件
os.write(bytes);
os.flush();
os.close();
}
} catch (Exception e) {
System.out.println("文件下载失败");
}
}

正常显示图片时前台代码为

复制代码

1
2
3
4
5
6
7
8

<el-table-column label="封面" prop="cover" #default="scope">
<el-image :src="scope.row.cover" style="height: 100px" :preview-src-list="[scope.row.cover]">
</el-image>
<!--
<div>{{scope.row.cover}}</div>-->
</el-table-column>

原因分析：

访问后端的接口为

复制代码

1
2
3
4
5
6
7
8
@RestController
@RequestMapping("/files")
public class FileController {
@GetMapping("/{flag}")
public void getFiles(@PathVariable String flag, HttpServletResponse response) {}
//即
http://localhost:9090/files/{flag}

前端请求为

复制代码

1
2
http://localhost:9090/files/5a231c0b-2d33-49f4-81e9-b57b9f810080

因此

复制代码

1
2
3
4
5
6
7
8
9
10
11
<el-table-column label="封面" prop="cover" #default="scope">
<el-image :src="scope.row.cover" style="height: 100px" :preview-src-list="[scope.row.cover]">
</el-image>
<!--
<div>{{scope.row.cover}}</div>-->
</el-table-column>
<!--
此时的:src="scope.row.cover"内容是
-->
:src=http://localhost:9090/files/5a231c0b-2d33-49f4-81e9-b57b9f810080