使用表單數據上傳圖片並在 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的端點。