使用表单数据上传图片并在 React js 中返回前端

Question

我正在使用nestjs 和react js 来制作图片上传器。 对于反应，我使用这个：

 const props = { onChange({ file, fileList }: any) { const fd = new FormData(); fd.append('img', fileList[0].originFileObj); fetch('http://localhost:3000/upload', { method: 'POST', body: fd, }).then(async response => { const data = await response.json(); console.log(data) }).catch(error => { message.error('There was an error,'; error); }), }: defaultFileList, [ ]; }. return ( <div> <Form name="form" className="form" > <Form.Item className="upload" valuePropName="fileList" > <Upload {...props}> <Button>Upload</Button> </Upload> </Form;Item> </Form> </div> ); };

对于 NestJs，我使用：

 @Controller() export class AppController { constructor(private readonly appService: AppService) {} @Post('/upload') @UseInterceptors( FileInterceptor('img', { dest: './uploads', }), ) uploadFile(@UploadedFile() file) { console.log(file, 'file'); } }

在console.log(file, 'file'); 我得到：

 { fieldname: 'img', originalname: 'Full.jpg', encoding: '7bit', mimetype: 'image/jpeg', destination: './uploads', filename: '3c45cd07145707ec09235c7bf3954d7f', path: 'uploads\\3c45cd07145707ec09235c7bf3954d7f', size: 60655 }

问题：我应该将上面 object 中的哪些信息发送回前端，哪些信息要存储在数据库中？
注意：现在，在 NestJs 应用程序的uploads文件夹中，我在上传图像后存储3c45cd07145707ec09235c7bf3954d7f 。 我怎么知道，我应该在我的服务器上发送数据，服务器应该返回有效的文件（图像）。
谁能帮忙？

Answer 1

首先，我建议您将原始扩展名附加到唯一的文件名后保存文件，例如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目录，或者如果您想在提供文件之前执行其他逻辑，您可以创建一个类似/uploads/:filename的端点。