前端回显上传到FTP服务器的图片（后端SpringBoot）_ftp中的图片如何回显-优快云博客

本文介绍了如何避免前端配置FTP信息，通过后端接口间接下载并Base64编码图片，以及不设置响应头和content-type以实现图片回显的解决方案。重点在于处理大图片和HTTP请求的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

江湖规矩先说结论：

两种方式解决

前端调用获取图片接口，后端从FTP服务器下载图片，将其转为Base64编码后的结果返回给前端，前端将返回结果置于img标签中的src属性中即可。（存在问题，图片比较大时，编码后的内容很长）
直接将下载图片的接口请求地址置于img标签中的src属性中，会自动调用接口，完成图片回显。

场景：不想在前端项目中配置ftp信息，但是通过调用后端接口的下载文件接口没法完成图片回显，而是直接下载图片了。

第二种解决方式：

后端接口处理：此处使用的是FTPClient获取FTP服务器上文件

private void outputFileToResponse(String filePath, HttpServletResponse resp, FTPClient ftpClient) {
        try {
            OutputStream out = resp.getOutputStream();
            ftpClient.retrieveFile(filePath, out);
            out.flush();
            out.close();
        } catch (IOException e) {
            log.error("下载失败", e);
        } finally {
            log.debug("开始归还连接");
            ftpPool.returnFTPClient(ftpClient);
        }
    }

注意点：不要给HttpServletResponse resp对象设置响应头和contentType，否则就成下载了

resp.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "utf-8"));
            resp.setContentType("multipart/form-data");

前端处理：

<img src=”/xxx-api/xxx1/download?filePath=%2Fupload%2Ffiles1%2Fpicture%2F202104%2Fhongmeigui.png”/>

src属性中设置为接口路径即可，后面加上参数。一般项目中都有网关，在后面拼接&token=xxxxx即可