企业网站优秀案例南昌网站建设南昌

目录

背景

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前端通过请求后端二进制流预览图片的全过程，上面这个方法不止图片，视频都可以用这种方法进行预览。

喜欢的小伙伴请留下一个免费的点赞，关注，评论吧！