Adonis V4.1 对接 React 实现图片上传存储及前端展示方案咨询

你遇到的问题本质是Adonis的tmp目录属于服务端非公开目录，前端无法直接访问服务端本地文件系统路径，以下是两种成熟的本地实现方案：

方案1：存储到public目录（最简单，无额外开发） #

Adonis的public目录是默认的静态资源服务目录，放在该目录下的文件可以直接通过HTTP路径访问。

操作步骤： #

1. 先在Adonis项目的public目录下新建uploads子目录，配置好读写权限
2. 修改上传逻辑，将存储路径从tmp目录改为public目录：

const image = request.file('photo', {
  types: ['image'],
  size: '2mb',
});

// 替换Helpers.tmpPath为Helpers.publicPath
await image.move(Helpers.publicPath('uploads'), {
  name: `${Date.now()}-${image.clientName}`,
});

if (image.status !== 'moved') {
  return image.error;
}

3. 修改返回前端的URL拼接逻辑，替换本地路径为服务端公开访问路径：

const colaboradoresList = await Database.raw(
  'select * from colaboradores where access = 1'
);
const userList = colaboradoresList[0];
// 生产环境替换为你实际的后端域名，建议写到环境变量中
const BACKEND_BASE = process.env.BACKEND_PUBLIC_URL || 'http://localhost:3333';
userList.map((i) => (i.url = `${BACKEND_BASE}/uploads/${i.photo}`));

返回的url可以直接放到React端<img>标签的src属性中直接展示。

方案2：新增静态资源接口（适合需要权限控制的场景） #

如果你不想将图片放到公开目录，或者需要对图片访问做权限校验，可以单独写一个图片返回接口：

1. 新增路由规则（写在start/routes.js中）：

Route.get('/static/uploads/:filename', async ({ params, response, auth }) => {
  // 可选：在这里加权限校验，比如判断当前登录用户是否有权限访问该图片
  // if (!auth.user) return response.unauthorized()

  const fileFullPath = Helpers.tmpPath(`uploads/${params.filename}`)
  return response.download(fileFullPath)
})

2. 拉取用户列表时，拼接上述接口路径即可：

const BACKEND_BASE = process.env.BACKEND_PUBLIC_URL || 'http://localhost:3333';
userList.map((i) => (i.url = `${BACKEND_BASE}/static/uploads/${i.photo}`));

生产环境优化建议 #

• 如果使用Nginx做反向代理，可以直接配置Nginx代理uploads目录的请求，性能远高于Adonis自身处理静态资源
• 建议增加文件名重复校验、恶意文件类型拦截等安全逻辑，避免上传漏洞

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