如何在Express中通过图片URL实现图片托管及方案优化

原有代码问题梳理 #

• 路由回调参数顺序错误：Express 路由的回调参数顺序是(request, response)，你写反了(res, req)会直接导致所有接口调用失败
• 方法误用：res.sendFile()仅支持传入本地文件路径，不能接收 Buffer 或流对象，你配置了responseType: 'stream'拿到的是可读流，用sendFile完全无法正常返回
• 冗余封装：axios 本身返回 Promise，不需要额外嵌套一层 Promise 做无意义包装
• 内存浪费：如果先把完整图片加载到内存再返回，大体积图片会占用很高内存，并发高的话服务很容易崩溃
• 缺少错误处理：上游图片请求失败、超时等场景没有对应的返回逻辑，会导致请求一直挂起
• 重复定义函数：getBuffer在每个路由的回调里重复定义，完全没有必要

方案1：流式实时代理（无本地缓存） #

这个方案不用把图片全量加载到内存，直接把上游返回的流管道到响应里，内存占用极低，适合图片量不大、更新频率高的场景。

const express = require("express")
const axios = require("axios")
const app = express()
const port = 4000

const images = [
  { name: "cow", url: "https://somewhere.com/cow.png" },
  { name: "chicken", url: "https://somewhere.com/chicken.png" }
]

// 统一注册路由
images.forEach(image => {
  app.get(`/${image.name}.png`, async (req, res) => {
    try {
      const upstreamRes = await axios({
        method: 'GET',
        url: image.url,
        responseType: 'stream',
        timeout: 10000 // 加超时防止请求挂死
      })
      // 继承上游响应的 Content-Type，避免浏览器识别错误
      res.set('Content-Type', upstreamRes.headers['content-type'])
      // 加浏览器缓存，减少重复请求
      res.set('Cache-Control', 'public, max-age=86400')
      // 直接管道流，边下载边返回，无内存积压
      upstreamRes.data.pipe(res)
    } catch (err) {
      console.error(`获取图片${image.name}失败:`, err)
      // 上游请求失败返回404或者占位图
      res.status(404).send('图片加载失败')
    }
  })
})

app.listen(port, () => { console.log(`服务已启动，端口${port}`) })

方案2：带本地缓存的代理（性能更高） #

如果图片不会频繁更新，建议把第一次拉取的图片存到本地，后续请求直接返回本地文件，不需要重复请求上游，响应速度快很多，也不会因为上游服务故障影响自己的服务可用性。

const express = require("express")
const axios = require("axios")
const fs = require('fs/promises')
const path = require('path')
const app = express()
const port = 4000

const images = [
  { name: "cow", url: "https://somewhere.com/cow.png" },
  { name: "chicken", url: "https://somewhere.com/chicken.png" }
]
// 本地缓存目录，不存在的话自动创建
const CACHE_DIR = path.join(__dirname, 'image_cache')
fs.mkdir(CACHE_DIR, { recursive: true })

images.forEach(image => {
  const localPath = path.join(CACHE_DIR, `${image.name}.png`)
  app.get(`/${image.name}.png`, async (req, res) => {
    try {
      // 先判断本地有没有缓存
      await fs.access(localPath)
      // 有缓存直接返回本地文件
      res.sendFile(localPath)
      return
    } catch {}

    // 没有缓存则请求上游
    try {
      const upstreamRes = await axios({
        method: 'GET',
        url: image.url,
        responseType: 'stream',
        timeout: 10000
      })
      res.set('Content-Type', upstreamRes.headers['content-type'])
      res.set('Cache-Control', 'public, max-age=86400')
      // 同时写到本地缓存和返回给请求端
      const writeStream = require('fs').createWriteStream(localPath)
      upstreamRes.data.pipe(writeStream)
      upstreamRes.data.pipe(res)
    } catch (err) {
      console.error(`获取图片${image.name}失败:`, err)
      res.status(404).send('图片加载失败')
    }
  })
})

app.listen(port, () => { console.log(`服务已启动，端口${port}`) })

小提示：如果后续图片数量很多，不用循环注册单独路由，可以统一用动态路由匹配，代码会更简洁：

const imageMap = new Map(images.map(img => [img.name, img.url]))
app.get('/:name.png', async (req, res) => {
  const imageUrl = imageMap.get(req.params.name)
  if (!imageUrl) return res.status(404).send('图片不存在')
  // 后续逻辑和上面的代理逻辑一致
})

内容的提问来源于stack exchange，提问作者account 1