파일 업로드 API 사용법

주어진 API 응답에서 item 배열의 첫 번째 요소에 포함된 세 가지 값(originalname, name, path)은 파일 업로드와 관련된 정보를 제공하며, 각각 특정 목적을 가지고 사용됩니다.

1. originalname

• 설명: 사용자가 업로드한 파일의 원래 이름입니다.
• 용도:
  • 파일 업로드 시, 사용자가 올린 파일의 이름을 백엔드에서 기록하거나 로깅할 때 사용됩니다.
  • 사용자가 파일을 다운로드하거나 파일 정보를 확인할 때, 원래 이름을 표시하기 위해 사용됩니다.
  • 예를 들어, sample-dog.jpg라는 이름은 사용자가 업로드한 파일의 원래 파일명입니다.
• 사용 예시:
  • "업로드된 파일: sample-dog.jpg"와 같은 메시지에 표시.
  • 파일 업로드 히스토리를 보여줄 때.

---

2. name

• 설명: 백엔드에서 저장된 파일의 고유 이름입니다.
  • 보통 파일 충돌을 방지하기 위해 생성된 고유 식별자(ID) 또는 랜덤화된 이름입니다.
  • 여기서는 Gb4OJkEX2k.jpg가 해당 값입니다.
• 용도:
  • 동일한 이름의 파일이 여러 번 업로드되더라도 저장 시 충돌이 발생하지 않도록 합니다.
  • 시스템 내부적으로 파일을 식별하고 관리할 때 사용됩니다.
  • 보안상의 이유로, 원래 파일명을 노출하지 않고 내부적으로 관리하는 데 사용됩니다.
• 사용 예시:
  • 파일을 데이터베이스나 파일 시스템에서 조회할 때 사용.
  • URL 생성 시 path와 함께 조합해서 사용.

---

3. path

• 설명: 서버에 저장된 파일의 경로입니다.
  • 파일이 실제로 저장된 위치를 나타냅니다.
  • 보통 서버의 특정 디렉토리 구조를 나타내며, 클라이언트가 파일에 접근할 수 있도록 URL의 일부로 사용됩니다.
  • 여기서는 /files/00-sample/Gb4OJkEX2k.jpg가 해당 값입니다.
• 용도:
  • 클라이언트에서 파일을 다운로드하거나 접근할 수 있도록 URL을 생성할 때 사용됩니다.
  • 예를 들어, baseUrl + path를 조합하여 최종 URL을 생성하고, 이를 통해 이미지를 불러옵니다.
• 사용 예시:
  • 브라우저에서 이미지를 표시하기 위한 <img src="..."> 태그의 src 값으로 사용.
  • 파일을 다운로드할 때 링크로 제공.

 

최종적으로 image 속성에 등록:

const response = {
  ok: 1,
  item: [
    {
      originalname: "sample-dog.jpg",
      name: "Gb4OJkEX2k.jpg",
      path: "/files/00-sample/Gb4OJkEX2k.jpg"
    }
  ]
};

// 유저 객체에 image 속성 추가
const userInfo = {
  name: "John Doe",
  email: "john.doe@example.com",
};

userInfo.image = response.item[0]; // image 속성에 파일 정보 추가
console.log(userInfo);

 

 

활용 예:

• 클라이언트에서 유저 프로필 사진을 표시:

<img src="{baseUrl}/files/00-sample/Gb4OJkEX2k.jpg" alt="Profile Picture">

 

• 프로필 사진 파일 정보 확인:

console.log(`Uploaded File: ${userInfo.image.originalname}`);