JavaScript Fetch API를 사용하여 파일 업로드를 어떻게 마스터할 수 있습니까?

JS fetch API를 사용한 파일 업로드 마스터하기

JS fetch API를 탐색하는 것은 어려울 수 있으며, 특히 파일 업로드를 처리할 때 더욱 그렇습니다. 이 과정을 단계별로 나누어 단순화해 보겠습니다.

1. 파일 입력 캡처

코드에 설명된 대로 파일 입력 요소를 사용하여 사용자가 파일을 선택할 수 있도록 합니다.

<form>
  <div>
    <label>Select file to upload</label>
    <input type="file">
  </div>
  <button type="submit">Convert</button>
</form>

2. 제출 이벤트 처리

제출 이벤트를 포착합니다(자리 표시자를 원하는 이벤트 처리기로 교체):

document.querySelector('form').addEventListener('submit', (event) => {
  // Prevent default form submission
  event.preventDefault();
  
  // Retrieve the selected file
  const input = event.target.querySelector('input[type="file"]');
  
  // Construct the request body
  const formData = new FormData();
  formData.append('file', input.files[0]);
  
  // Submit the request
  fetch('/files', {
    method: 'POST',
    body: formData
  }).then(/* perform necessary actions */);
});

3. 요청 본문 구성

가져오기를 사용하여 파일을 보내려면 FormData API를 사용하세요. multipart/form-data 요청 본문을 생성합니다. 선택한 파일(input.files[0]) 및 사용자 정보와 같은 추가 데이터를 formData 객체에 추가합니다.

const formData = new FormData();
formData.append('file', input.files[0]);
formData.append('user', 'username');

4. 가져오기 요청 시작

요청 본문이 준비되면 가져오기를 사용하여 엔드포인트 URL('/files')을 지정하고 formData 개체를 본문으로 제공하여 POST 요청을 보냅니다.

fetch('/files', {
  method: 'POST',
  body: formData
})
.then(/* handle the response as desired */);

그리고 짜잔! 이제 JS fetch API를 사용하여 모든 기능을 갖춘 파일 업로드 메커니즘을 갖게 되었습니다.

위 내용은 JavaScript Fetch API를 사용하여 파일 업로드를 어떻게 마스터할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!