时间戳

首页 > 解决方案 > 从 Adonis V4.1 发送和显示图像

javascript - 从 Adonis V4.1 发送和显示图像

问题描述

如何从 React 应用程序发送图像到 Adonis，将其“保存”在数据库中，并在需要时获取它以在前端使用？
现在，我只能通过 Postman 成功处理图像，我的代码是这样的：

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

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

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

/////

const data = {
  username,
  email,
  role,
  photo: image.fileName,
  password,
  access: 1,
};

const user = await User.create(data);

在第一部分中，我处理图像并将其移动到后端内的 tmp，在下一部分中我使用image.fileName并创建一个用户。

当我需要获取我的用户列表时，我会这样做：

const colaboradoresList = await Database.raw(
  'select * from colaboradores where access = 1'
);
const userList = colaboradoresList[0];
userList.map((i) => (i.url = Helpers.tmpPath(`uploads/${i.photo}`)));

但正如你所知道的，Helpers.tmpPath('uploads/${i.photo}'))它将返回当前图像的本地路径，并且我无法在 React 上显示它，因为我需要使用公共文件夹或下载它并导入。

有没有办法在本地进行，或者唯一的方法是创建一个 AWS 并用于Drive.getUrl()创建一个 URL 并发送回我的前端？

标签： javascriptbackendadonis.js

解决方案

代替

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

我用：

await image.move(Helpers.publicPath('uploads'),
{name: `${Date.now()}-${image.clientName}`})

为此，您需要更改文件夹以使其正确存储：
文件夹形成

然后发送到前端url = '/uploads/${i.photo}'，文件名在哪里i.photo，所以我可以像这样在 React 中连接apiBase + url。
结果是你apiUrl + your file path应该在公用文件夹上： 结果

推荐阅读