如何在 req.body 中發送 post 請求后讀取文件

Question

我遇到了一個問題，當我想將圖像上傳到 s3 存儲桶時，沒有任何通過。

基本上我得到的唯一信息是

API resolved without sending a response for /api/upload/uploadPhoto, this may result in stalled requests.

在前端，我有一個可以獲取多個文件（主要是圖像）的輸入，然后將這些文件存儲在 event.target.files 中。

我有一個 function，它將每個文件存儲在一個 state 數組中，並且通過按鈕提交它向我的 next.js API 發送一個發布請求。

這是前端的邏輯：

這個 function 處理照片，所以每當我添加照片時，它都會自動將其添加到 listingPhotos state：

const handleListingPhotos = async (e: any) => {
    setMessage(null);
    let file = e.target.files;

    console.log("hello", file);

    for (let i = 0; i < file.length; i++) {
      const fileType = file[i]["type"];
      const validImageTypes = ["image/jpeg", "image/png"];
      if (validImageTypes.includes(fileType)) {
        setListingPhotos((prev: any) => {
          return [...prev, file[i]];
        });
      } else {
        setMessage("Only images are accepted");
      }
    }
  };

一旦照片存儲在 state 中，我就可以在瀏覽器的 console.log 中看到文件的數據。 我運行 onSubmit 來調用POST API ：

const handleSubmit = async (e: any) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("files[]", listingPhotos);
    await fetch(`/api/upload/uploadPhoto`, {
      method: "POST",
      headers: { "Content-Type": "multipart/form-data" },
      body: formData,
    }).then((res) => res.json());
  };
  console.log("listingphotos:", listingPhotos);

然后使用此邏輯上傳到 S3 存儲桶，但問題是當我登錄 req.body 時，我得到了此類信息：

req.body ------WebKitFormBoundarydsKofVokaJRIbco1
Content-Disposition: form-data; name="files[]"

[object File][object File][object File][object File]
------WebKitFormBoundarydsKofVokaJRIbco1--

api/upload/UploadPhoto邏輯：

import { NextApiRequest, NextApiResponse } from "next";
const AWS = require("aws-sdk");

const access = {
  accessKeyId: process.env.AWS_ACCESS_KEY_ID as string,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY as string,
};

// creates an S3 Client
const s3 = new AWS.S3({ region: "region", credentials: access });

export default async function uploadPhoto(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // take info from parent page
  // console.log("req.body: ", req.body);

  if (req.method === "POST") {
    console.log("req.body", req.body);
    let body = req.body;
    let headers = req.headers;
    let contentType = headers["Content-Type"] || headers["content-type"];

    // check for correct content-type
    if (!contentType.startsWith("multipart/form-data")) {
      return { statusCode: 400, body: "Invalid content type" };
    }

    let boundary = contentType.replace("multipart/form-data; boundary=", "");
    let parts = body.split(boundary);

    for (let part of parts) {
      if (part.startsWith("Content-Disposition")) {
        let [fileData] = part.split("\r\n\r\n");
        fileData = fileData.slice(0, -2);
        let [fileName] = part.split("filename=");
        fileName = fileName.slice(1, -1);
        let params = {
          Bucket: "RANDOM BUCKET NAME",
          Key: fileName,
          Body: fileData,
          ContentType: { "image/png": "image/jpg" },
        };
        // Need to set the PARAMS for the upload
        await s3.putObject(params);
        console.log(
          "Successfully uploaded object: " + params.Bucket + "/" + params.Key
        );
      }
    }
    return {
      statusCode: 200,
      body: "File uploaded",
    };
    // Uploads the files to S3
  }
}

Answer 1

我能夠找到一種方法來讀取文件是否正確顯示。

req.body {
  fileName: 'b699417375e46286e5a30fc252b9b5eb.png',
  fileType: 'image/png'
}

POST 請求代碼更改為以下內容：

const s3Promises = Array.from(listingPhotos).map(async (file) => {
      const signedUrlRes = await fetch(`/api/upload/uploadPhoto`, {
        method: "POST",
        body: JSON.stringify({
          fileName: file.name,
          fileType: file.type,
        }),
        headers: { "Content-Type": "application/json" },
      });

顯然，這不是解決方案，但它是解決方案的一部分。 我現在遇到的唯一問題是處理 CORS 以查看文件是否已發送到存儲桶。