[s3-example] 5. S3 이미지 업로드

1. [파일 업로드] 눌러서 파일 선택한다.

<label htmlFor="file">파일 업로드</label>
<input id="file" onChange={handleFileChange} />
<label htmlFor="file">파일 업로드</label>
<input id="file" onChange={handleFileChange} />

2. 선택한 파일을 formData에 추가하고, body에 formData 담아 서버에 POST 요청한다.

const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
   if (!e.target.files) return;

   const formData = new FormData();

   // key가 file0, file1, ...인 form 필드의 value에 파일 정보를 담아 formData에 추가한다.
   // 서버에서 파일을 구별하기 위해 key를 이런 식으로 설정한다.
   for (let i = 0; i < e.target.files.length; i++) {
      formData.append(`file${i}`, e.target.files[i]);
   }

   // POST 요청
   postImages(formData);
};
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
   if (!e.target.files) return;

   const formData = new FormData();

   // key가 file0, file1, ...인 form 필드의 value에 파일 정보를 담아 formData에 추가한다.
   // 서버에서 파일을 구별하기 위해 key를 이런 식으로 설정한다.
   for (let i = 0; i < e.target.files.length; i++) {
      formData.append(`file${i}`, e.target.files[i]);
   }

   // POST 요청
   postImages(formData);
};

// 인수로 받은 formData를 body에 담아 POST 요청한다.
const postImages = async (formData: FormData) => {
  await fetch("http://localhost:4000/image", {
    method: "POST",
    body: formData,
  });
};

// 인수로 받은 formData를 body에 담아 POST 요청한다.
const postImages = async (formData: FormData) => {
  await fetch("http://localhost:4000/image", {
    method: "POST",
    body: formData,
  });
};

3. 클라이언트로부터 받아온 formData 파싱하기

 const fileData = await new Promise((resolve, reject) => {
   const form = new formidable.IncomingForm();

   // formidable로 폼 파싱
   form.parse(req, (err, fields, files) => {
      if (err) return reject(err);
      return resolve({ fields, files });
   });
 });

 const parsedFileData = fileData;
 const fileData = await new Promise((resolve, reject) => {
   const form = new formidable.IncomingForm();

   // formidable로 폼 파싱
   form.parse(req, (err, fields, files) => {
      if (err) return reject(err);
      return resolve({ fields, files });
   });
 });

 const parsedFileData = fileData;

 // parsedFileData
 {
   fields: {},
   files: { file0: [ [PersistentFile] ], file1: [ [PersistentFile] ] }
 }
 // parsedFileData
 {
   fields: {},
   files: { file0: [ [PersistentFile] ], file1: [ [PersistentFile] ] }
 }

4. parsedFileData.files의 파일들을 fs.createReadStream() 함수로 WriteStream 객체로 만들고 업로드하기

 Object.values(parsedFileData.files).forEach(async item => {
     // fs.createReadStream이용해 스트림 전환 후 올리기
     const fileBuffer = fs.createReadStream(item[0].filepath);
     fileBuffer.on('error', err => console.log(err));

     const fileName = item[0].originalFilename;

     await uploadFile(fileBuffer, fileName, item[0].mimetype);
 });
 Object.values(parsedFileData.files).forEach(async item => {
     // fs.createReadStream이용해 스트림 전환 후 올리기
     const fileBuffer = fs.createReadStream(item[0].filepath);
     fileBuffer.on('error', err => console.log(err));

     const fileName = item[0].originalFilename;

     await uploadFile(fileBuffer, fileName, item[0].mimetype);
 });

 async function uploadFile(fileBuffer, fileName, mimetype) {
   const uploadParams = {
      Bucket: awsS3Bucket,
      Key: fileName,
      Body: fileBuffer,
      ContentType: mimetype,
   };

   const res = await s3.send(new PutObjectCommand(uploadParams));
   return res.$metadata.httpStatusCode;
 }
 async function uploadFile(fileBuffer, fileName, mimetype) {
   const uploadParams = {
      Bucket: awsS3Bucket,
      Key: fileName,
      Body: fileBuffer,
      ContentType: mimetype,
   };

   const res = await s3.send(new PutObjectCommand(uploadParams));
   return res.$metadata.httpStatusCode;
 }

5. 이미지 다시 불러오기(revalidate)

 const [images, setImages] = useState<string[]>();

 const fetchDataAndSetState = () => {
      getImages().then(res => setImages(res));
 };

 ...

 return (
     <label htmlFor="file">파일 업로드</label>
     <input
       id="file"
       onChange={e => {
          handleFileChange(e).then(() => setTimeout(() => fetchDataAndSetState(), 500));
       }}
       multiple
       type="file"
     />
     ...
 )
 const [images, setImages] = useState<string[]>();

 const fetchDataAndSetState = () => {
      getImages().then(res => setImages(res));
 };

 ...

 return (
     <label htmlFor="file">파일 업로드</label>
     <input
       id="file"
       onChange={e => {
          handleFileChange(e).then(() => setTimeout(() => fetchDataAndSetState(), 500));
       }}
       multiple
       type="file"
     />
     ...
 )

파일 업로드 후 즉시 S3에 객체의 업로드가 반영이 안되기 때문에 setTimeout 함수로 시간 설정 후 fetchDataAndSetState 함수 호출한다.