使用表单数据上传图片并在 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
} 

问题：我应该将上面对象中的哪些信息发送回前端，哪些信息要存储在数据库中？
注意：现在，在 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 的端点。