[TypeScript]_이미지 서버로 보낼때

hanseungjune·2023년 3월 26일
0

비전공자의 IT준비

목록 보기
58/68
post-thumbnail

📌 fetch로 해야댐(서버에서 body로 받을때)

import { useState } from "react";

const FileSendTest = () => {
  const [selectedFile, setSelectedFile] = useState<any>(null);

  const handleFileChange = (event: any) => {
    setSelectedFile(event.target.files[0]);
  };

  const ObjString: string | null = localStorage.getItem("login-token");
  const Obj = ObjString ? JSON.parse(ObjString) : null;

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append("carVin", "KMHTB41BP8A000000");
    formData.append("category", "사고");
    formData.append("content", "2중 충돌로 인한 운전석 문 파손");
    formData.append("insuranceImg", selectedFile);
    formData.append("insuranceDt", "2022-10-05T00:00:00");

    try {
      const response = await fetch("http://192.168.0.64/api/insurance",{
        method: "POST",
        body: formData,
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': `Bearer ${Obj.value}`
        }
      });
      console.log('File uploaded successfully:', response);
    } catch (error) {
      console.error("Error uploading file:", error);
    }
    setSelectedFile(null); // 파일 선택 초기화
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload} disabled={!selectedFile}>
        Upload
      </button>
    </div>
  );
};

export default FileSendTest;

📌 Axios 요청 시에는 안됨

const formData = new FormData();
formData.append('carVin', "KMHTB41BP8A000000");
formData.append('category', "사고");
formData.append('content', "2중 충돌로 인한 운전석 문 파손");
formData.append('insuranceImg', selectedFile);
formData.append('insuranceDt', "2022-10-05T00:00:00");

try {
  const response = await axios({
    method: 'POST',
    url: 'http://192.168.0.64/api/insurance',
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data',
      'Authorization': `Bearer ${Obj.value}`
    }
  });
  console.log('File uploaded successfully:', response);
} catch (error) {
  console.error('Error uploading file:', error);
}
setSelectedFile(null); // 파일 선택 초기화
profile
필요하다면 공부하는 개발자, 한승준

0개의 댓글