在nodeJS中正确设置图像路径并在React中显示它

Question

我在节点中构建了一个简单的用户注册功能，其中存储用户的姓名、电子邮件、密码和头像图像。我使用 multer 上传图像（在 uploads/ 中），然后手动将文件放入子文件夹中（在 uploads/someUsersId/image.jpeg 中）并添加扩展名。所有这些工作正常，但我将头像图像路径存储为：

"C:\Users\Blah\Desktop\test\multer-test\backend\uploads\64fb0a40db0abdff97117746\avatar-64fb0a40db0abdff97117746.jpeg"

对于前端，我使用 React 和 redux-toolkit 来存储用户的状态。我正在尝试读取用户数据并将其显示在页面上。文本字段（姓名、电子邮件等）工作正常，但是，对于头像图像我收到错误：

“不允许加载本地资源：file:///C:/Users/Blah/Desktop/test/multer-test/backend/uploads/64fb0a40db0abdff97117746/avatar-64fb0a40db0abdff97117746.jpeg”

我很确定这不是我应该存储图像路径的正确方式。您能否推荐存储图像路径的正确方法，以便即使我将此 MERN 应用程序上传到托管提供商后，图像路径也能正常工作。

下面是用户注册控制器的主要部分，我正在其中处理归档部分：

if (!emailExists) {
    let user = await User.create({ name, email, password, userType });

    // uploads directory path
    const uploadsDirectoryPath = path.resolve(__dirname, '..', 'uploads');

    // make user's directory using user id
    const userDir = await mkdir(path.join(uploadsDirectoryPath, user.id), { recursive: true });

    // copy avatar file into user's directory
    await copyFile(path.join(uploadsDirectoryPath, req.file.filename), path.join(userDir, req.file.filename));

    // rename avatar file in user's directory
    const oldFileExtension = req.file.originalname.split('.')[1];
    const newFileName = `avatar-${user.id}.${oldFileExtension}`;
    await rename(path.join(userDir, req.file.filename), path.join(userDir, newFileName));

    // remove old file
    await unlink(path.join(uploadsDirectoryPath, req.file.filename));

    // user avatar file path
    const avatarPath = path.join(userDir, newFileName);

    user.avatar = avatarPath;
    await user.save();

    if (user) {
      return res.status(201).json({
        id: user._id,
        name: user.name,
        email: user.email,
        userType: user.userType,
        avatar: user.avatar,
        token: generateToken(user._id),
      });
    } else {
      res.status(500);
      throw new Error('Unable To Register User!');
    }
  } else {
    res.status(400);
    throw new Error('Email address is already in use. Please choose another!');
  }

Answer 1

您只需将图像保存在文件夹和根 app/server.js 文件中，设置路径如下

const uploadsDirectoryPath = path.resolve(__dirname, 'uploads');

并且不要忘记添加节点服务器域名和文件位置。

示例 您的客户端位于 http://localhost:3000 您的图像位于 http://localhost:8000

从节点服务器发送图像，如下所示：- http://localhost:8000/image/car.png