JavaScript로 파일 보내기

사용자가 파일을 선택할 수 있는 버튼을 나타내는 HTML 요소 이 있다고 가정합니다. 버튼을 클릭하고 파일을 선택하면 해당 이름이 document.getElementById("image-file").value에 저장됩니다. 서버가 URL "/upload/image"에서 다중 부분 POST 요청을 지원하는 경우 해당 엔드포인트로 파일을 어떻게 보내나요? 또한 업로드 진행 상황을 어떻게 모니터링합니까?

Fetch가 포함된 순수 JavaScript

선택적인 wait-try-catch 처리와 함께 fetch API를 사용할 수 있습니다.

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

Async-Try-Catch의 예

이 예에는 JSON으로 전송된 사용자 데이터도 포함됩니다. :

async function SavePhoto(inp) {
  let user = { name: 'john', age: 34 };
  let formData = new FormData();
  let photo = inp.files[0];

  formData.append("photo", photo);
  formData.append("user", JSON.stringify(user));

  const ctrl = new AbortController(); // for timeout
  setTimeout(() => ctrl.abort(), 5000);

  try {
    let r = await fetch('/upload/image', {
      method: "POST",
      body: formData,
      signal: ctrl.signal,
    });
    console.log('HTTP response code:', r.status);
  } catch (e) {
    console.log('Huston we have problem...:', e);
  }
}

업로드 진행 상황 모니터링

안타깝게도 request.onprogress와 같은 메소드는 가져오기를 사용한 HTML5 파일 업로드에서 지원되지 않지만 네트워크 이벤트를 수신하여 전체 업로드 진행 상황을 모니터링할 수 있습니다.

let xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(e) {
  if (e.lengthComputable) {
    let percentComplete = (e.loaded / e.total) * 100;
    console.log('Upload progress:', percentComplete   '%');
  }
});

xhr.open('POST', '/upload/image');
xhr.send(formData);