背景:在开发项目阶段,前端、后端都在本人电脑上,目前前端需要一些图片展示,本可以直接把这些图片放在前端目录的静态文件中,但为了更真实模拟数据,想实现从前端发起请求图片链接,然后在后端返回图片数据用于展示。
1.前端
下面是我模拟前端发起的图片链接,使用get请求:
http://localhost:4200/getImg?sort=coffee&img=coffee0001.jpg
解释:服务器中有个接口为'/getImg'
,后面是get请求的query
参数,使用了两个查询参数。第一个参数sort是分类,因为我的图片有不同的类型,不同类型的图片放在不同的文件夹中;第二个参数是图片存放在服务器下的名称,即获取在coffee文件夹中coffee0001.jpg图片。
前端用于测试的HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>获取图片数据</title>
</head>
<body>
<img
src="http://localhost:4200/getImg?sort=coffee&img=coffee0001.jpg"
alt=""
/>
<img
src="http://localhost:4200/getImg?sort=coffee&img=coffee0002.jpg"
alt=""
/>
<img
src="http://localhost:4200/getImg?sort=coffee&img=coffee0003.jpg"
alt=""
/>
</body>
</html>
2.后端
后端根目录下的food_matter存放各种分类图片:
下面是NodeJS响应前端/getImg
的接口:
const app=express()
const fs = require('fs')
app.get('/getImg', function (req, res) {
let sort = req.query.sort
let img = req.query.img
let path = `food_matter/${
sort}/${
img}`
const data = fs.readFile(path, function (err, data) {
if (err) {
res.send('读取错误')
} else {
res.send(data)
}
})
})
分析:读取项目目录下的文件使用fs
模块中的readFile()
函数,这是异步读取文件函数。第一个参数是文件所在的路径
,因此我们须用请求的req
对象的query中获取分类和图片名生成文件的路径;第二个参数是读取文件的回调函数,将数据返回给前端即可。
成功获取: