前端回显上传到FTP服务器的图片(后端SpringBoot)

江湖规矩先说结论:

两种方式解决

  • 前端调用获取图片接口,后端从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即可

以下是一个基于KindEditor的文件上传、存储与回显前端后端、数据库代码示例: 前端代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>KindEditor文件上传示例</title> <!-- 引入KindEditor --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/lang/zh-CN.js"></script> </head> <body> <!-- 创建一个textarea作为KindEditor的编辑器 --> <textarea id="editor" name="content"></textarea> <!-- 创建一个按钮用于触发文件上传 --> <button id="uploadBtn">上传图片</button> <!-- 显示上传后的图片 --> <div id="preview"></div> <script> $(function() { // 创建一个KindEditor编辑器 var editor = KindEditor.create('#editor', { basePath: 'https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/', uploadJson: '/upload', // 指定上传文件的后端接口 allowFileManager: false }); // 点击上传按钮时,触发文件上传 $('#uploadBtn').click(function() { editor.sync(); // 将编辑器的内容同步到textarea editor.hideDialog(); // 关闭编辑器的弹窗 // 使用ajax上传文件 $.ajax({ url: '/upload', type: 'POST', cache: false, data: new FormData($('form')[0]), // 表单数据 processData: false, contentType: false }).done(function(res) { if (res.code === 0) { // 上传成功,显示上传后的图片 $('#preview').html('<img src="' + res.data.url + '">'); } else { alert(res.msg); } }).fail(function() { alert('上传失败,请重试!'); }); }); }); </script> </body> </html> ``` 后端代码(使用Node.js + Express实现): ```js const express = require('express'); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const app = express(); // 创建一个multer实例,用于处理文件上传 const upload = multer({ storage: multer.diskStorage({ destination: function(req, file, cb) { // 指定上传文件的存储目录 cb(null, path.join(__dirname, '/public/uploads')); }, filename: function(req, file, cb) { // 指定上传文件的文件名,这里使用时间戳 + 文件后缀名 const ext = path.extname(file.originalname); cb(null, Date.now() + ext); } }) }); // 处理文件上传的接口 app.post('/upload', upload.single('imgFile'), function(req, res) { const file = req.file; if (!file) { return res.json({ code: -1, msg: '请选择要上传的文件!' }); } // 文件上传成功后,将图片信息存储到数据库 // 这里假设使用MongoDB作为数据库,图片信息存储在名为images的集合 const db = require('mongodb').MongoClient; const url = 'mongodb://localhost:27017'; const dbName = 'test'; db.connect(url, function(err, client) { if (err) { console.log('数据库连接失败:', err); } else { const db = client.db(dbName); const collection = db.collection('images'); collection.insertOne({ url: '/uploads/' + file.filename }, function(err, result) { if (err) { console.log('图片信息插入数据库失败:', err); } else { console.log('图片信息插入数据库成功!'); } client.close(); }); } }); // 返回上传成功的结果 res.json({ code: 0, msg: '上传成功!', data: { url: '/uploads/' + file.filename } }); }); // 启动服务器 app.listen(3000, function() { console.log('服务器启动成功!'); }); ``` 数据库代码(使用MongoDB实现): ```js // 创建一个名为test的数据库 use test // 在test数据库创建一个名为images的集合 db.createCollection('images') // 插入一条图片信息到images集合 db.images.insertOne({ url: '/uploads/1629436553080.jpg' }) ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值