Vue3+Springboot图片下载

最新推荐文章于 2024-03-29 17:22:51 发布

菜的深沉

最新推荐文章于 2024-03-29 17:22:51 发布

阅读量581

点赞数

文章标签： springboot vue

本文链接：https://blog.csdn.net/qq_16525829/article/details/130209711

版权

后端图片下载接口

    @ApiOperation(value = "下载图片")
    @GetMapping("download/{pictureId}")
    public void download(@PathVariable("pictureId") @NotNull(message="参数错误") Long id,
                     HttpServletResponse response) {
        PicturePo picturePo = pictureService.getById(id);
        if(Objects.isNull(picturePo)) BusinessException.throwException(ResultVo.notFound());
        Path path = FolderInitRunner.FOLDER_PATH.resolve(picturePo.getPath());
        if (!Files.exists(path)) {
            log.warn("图片丢失：{}", picturePo.toString());
            BusinessException.throwException(ResultVo.notFound());
        }
        try (OutputStream os = response.getOutputStream()) {
            response.setHeader("Content-Disposition", "attachment;filename=" +URLEncoder.encode(picturePo.getTitle() + "." + picturePo.getType(), "UTF-8"));
            response.setContentType("application/octet-stream");
            Files.copy(path, os);
        } catch (Exception e) {
            log.error("图片传输异常：{}",picturePo.toString());
            BusinessException.throwException(ResultVo.error());
        }
    }

前端代码
在<template>代码块中加入以下代码

<a :href="link" download="" id="a-download">
    <img :src="link" alt=""/>
</a>

在<style>标签中加入以下代码

#a-download{
  display: none;
}

在<script>标签中加入以下代码

const link=ref("");
const download=async (id: string) => {
  link.value = axios.defaults.baseURL + '/' + url.download + '/' + id;
  // console.log(document?.getElementById('a-download')?.getAttribute('href'));
  await nextTick();// 等待:href='link'更新完成
  document?.getElementById('a-download')?.click();
}