SpringBoot+VUE(Ant Design Vue)实现图片下载预览功能
目录
背景
1.后端实现下载接口
2.前端请求实现
第一步：导入api
第二步：请求接口
3.前端展示实现
4.实现效果展示
5.总结
背景
这段时间通过SpringBoot+VUE(Ant Design Vue)框架做了一个项目，但是在图片下载，展示的时候在网上搜了好多方法都解决不了，最后发现虽然图片能下载了，但是没有正确赋值给前端字段，所以今天把这个坑分享出来，以免各位踩坑！
1.后端实现下载接口
以下代码是前端请求图片地址，需要传入一个图片的唯一标识符
@RequestMapping(value = "/download", method = RequestMethod.GET)
@Transactional
public void download(Thing thing, HttpServletResponse response) throws IOException {
String fileUUID = thing.cover;
if(StringUtils.isEmpty(fileUUID)) {
return;
}
// 根据文件的唯一标识码获取文件
File destFile = new File(uploadPath + File.separator + "image" + File.separator + fileUUID);
// 设置输出流的格式
ServletOutputStream os = response.getOutputStream();
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileUUID, "UTF-8"));
response.setContentType("image/jpeg");
// 读取文件的字节流
os.write(FileUtil.readBytes(destFile));
os.flush();
os.close();
}2.前端请求实现
以下是代码部分，
第一步：导入api
import { downloadApi } from '/@/api/thing';第二步：请求接口
需要注意的是前端请求代码需要放在请求列表for循环里面
await downloadApi({
cover: item.cover,
})
.then((res) => {
item.cover = res.data;
const reader = new FileReader();
reader.onload = (e) => {
this.cover = e.target.result; // 将base64编码的图片数据存储在Vue组件的data属性中
};
reader.readAsDataURL(new Blob([res.data], { type: 'image/jpeg' })); // 根据实际情况调整MIME类型
})
.catch((err) => {
console.log(err);
});
item.cover = BASE_URL + '/api/thing/download?cover=' + item.cover;3.前端展示实现
这一步是需要在table里面赋值属性
<template v-if="column.key === 'cover'">
<img :src="record.cover" style="width: 50px; height: 50px" />
</template>4.实现效果展示
5.总结
以上步骤就是vue前端通过请求后端二进制流预览图片的全过程，上面这个方法不止图片，视频都可以用这种方法进行预览。
喜欢的小伙伴请留下一个免费的点赞，关注，评论吧！