file 저장

• backend 에서 mitipartfile 형태로 파일을 전송받을때 client에서는 어떻게 받을까?

• MultipartFile은 주로 HTTP 멀티파트 요청을 처리할 때 사용되는 Java 인터페이스이다.
  일반적으로 Spring Boot 같은 서버 사이드 프레임워크에서 사용된다.

const url = 'http://backend.server.com/upload'; // 백엔드 URL
const input = document.querySelector('input[type="file"]'); // 파일 입력 필드

const formData = new FormData();
formData.append('file', input.files[0]); // 'file'은 백엔드에서 @RequestParam의 이름과 일치해야 한다.

// fetch API
fetch(url, {
    method: 'POST',
    body: formData
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log('Error:', error));

// axios ver
import axios from 'axios';

const url = 'http://backend.server.com/upload'; // 백엔드 URL
const input = document.querySelector('input[type="file"]'); // 파일 입력 필드

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

axios.post(url, formData, {
    headers: {
        'Content-Type': 'multipart/form-data'}});

• 이때 req에서 heaer를 Content-Type을 multipart/form-data로 설정해주는 것이 일반적이다.
  그런데 클라이언트 단에서 FormData 객체를 사용해 파일을 전송할 경우, 대부분의 웹 API 클라이언트는 이 헤더를 자동으로 설정해 준다.

• 즉, 백엔드에서 멀티파트 파일을 받을 것이라면, 프론트엔드에서도 Content-Type을 multipart/form-data로 설정하는 것이 좋다.

flutter JSchannel method

• webview에서 js channel로 사용자가 갤러리에서 선택한 데이터를 넘겨주면 인코딩 된 base64 데이터를 이진문자열로 디코딩하여 값을 저장한다. (포스트 참조)

• 그리고 해당 값을 JS의 Blob 객체로 생성하여 저장하면 된다.

window.getImageData = function (base64Data) {
  const binaryString = atob(base64Data);
  const uint8Array = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    uint8Array[i] = binaryString.charCodeAt(i);
  }
  const blob = new Blob([uint8Array], { type: "image/jpeg" });
  fileModel.value = new File([blob], `${selectedPest.value}_${"1"}.jpeg`);
  pickImageList.value.push(fileModel.value);
  imgList.value.push(URL.createObjectURL(blob));
};