Javascript 使用表单数据上传图像并返回到React js中的前端

我正在使用nestjs和react js制作一个图像上传程序。对于react，我使用以下内容：

const props={
onChange（{file，fileList}:any）{
const fd=new FormData（）；
fd.append（'img'，文件列表[0].originFileObj）；
取（'http://localhost:3000/upload', {
方法：“POST”，
正文:fd,，
})
。然后（异步响应=>{
const data=wait response.json（）；
console.log（数据）
})
.catch（错误=>{
message.error（'发生错误！'，error）；
});
},
默认文件列表：[
],
};
返回(
上传
);
};首先，我建议您将原始扩展名附加到唯一的文件名后保存文件，如
3c45cd07145707ec09235c7bf3954d7f.jpg
。这是因为您通常希望静态地提供此文件，而不需要执行其他逻辑。如果不使用扩展名保存，则在提供文件时必须自己分配mimetype

您可以使用自定义回调向文件名添加扩展名：

    FileInterceptor('img', {
      dest: './uploads',
      filename: (req: any, file: any, cb: any) => {
        cb(null, `${generateRandomUUID()}${extname(file.originalname)}`);
      },
    })

此文件名是访问此文件所有内容所需的全部文件名。如果需要，可以将其与原始文件名、大小、mimeType、编码等一起存储在数据库中

如果将文件名发送到前端就足够了。然后，前端可以向
/uploads/3c45cd07145707ec09235c7bf3954d7f.jpg执行GET请求，它将拥有自己的映像。您需要静态地为
上传
目录提供服务，或者您可以创建一个端点，如
/uploads/：filename
，如果您想在提供文件之前执行其他逻辑。
您的回答确实帮助了我。有一个问题，如果每次我都将图像存储在服务器的uploads文件夹中，那么我可以存储多少图像？这不是一个坏习惯还是可以的？为什么我要存储有关图像的数据？如果您愿意，您可以将其存储在数据库中，以及原始文件名、大小、mimeType、编码等，存储在DB中，目的是什么？询问您可以在硬盘中存储尽可能多的空间。这是否是一种不好的做法，取决于您的用例。如果你想永远保存这些文件，这没关系。如果没有，您可能希望定期运行检查以删除未使用的文件。因为用户可以上载文件，但不能使用它。保存该数据的目的同样取决于您的用例。假设您在前端有一个用于上传文件的CMS。您可能希望按文件大小排序文件。如果发生这种情况，使用数据库而不是文件系统就更容易了。您可能还希望保留原始文件名以便更好地识别。与在数据库中存储图像相关。如果我想将其存储在DB中，我应该在那里存储哪些数据？这个
3c45cd07145707ec09235c7bf3954d7f.jpg
？如果我在文件系统中存储图像，我应该在UI上提供数据，如果我将数据存储在DB中而不存储在文件系统中，如何在UI上发送图像？谢谢。@您需要将文件本身存储在文件系统中并从那里提供服务。除此之外，您还可以在数据库中存储文件名以及有关该文件的其他数据。但这是可选的。