thornapp 님의 블로그

웹 애플리케이션을 개발하다 보면, 프로젝트 내에 있는 이미지 파일을 불러와 <input type="file"> 요소에 직접 넣고, 이를 서버에 전송하고 싶은 상황이 생깁니다.

예를 들어, 기본 이미지가 정해져 있고 사용자가 수정하지 않는 경우, 해당 이미지를 별도의 선택 없이 자동으로 서버에 전달하는 방식으로 활용할 수 있습니다.

전체흐름 요약

1. 프로젝트 내부 이미지 경로를 받아 Base64 데이터로 변환
2. Base64 데이터를 File 객체로 변환
3. File 객체를 input[type=“file”] 요소에 삽입
4. 폼 전송

1. 이미지 경로를 base64 데이터로 변환

imgToBase64: function(file, maxWidth, maxHeight) {
  let src = (typeof file === 'string') ? file : URL.createObjectURL(file);

  return new Promise((resolve, reject) => {
    let image = new Image();

    image.onload = function () {
      let canvas = document.createElement('canvas');
      canvas.width = image.naturalWidth > maxWidth ? maxWidth : image.naturalWidth;
      canvas.height = image.naturalWidth > maxHeight ? maxHeight : image.naturalHeight;

      canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
      let uri = canvas.toDataURL('image/png'); // base64 데이터 생성
      resolve(uri);
    };

    image.src = src;
  });
}

2. Base64 데이터를 File 객체로 변환

dataURLtoFile: function(dataurl, filename) {
  let arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new File([u8arr], filename, { type: mime });
}

3. File 객체를 input[type=“file”] 요소에 삽입

function setImage(imgInfo) {
  let fullPath = imgInfo.defaultImg;
  let fileName = fullPath.split('\\').pop().split('/').pop();

  WebUtil.imgToBase64(fullPath, imgInfo.widthSize, imgInfo.heightSize).then(resultData => {
    let file = WebUtil.dataURLtoFile(resultData, fileName);
    let container = new DataTransfer(); // FileList 대체용
    container.items.add(file);
    
    // 파일 input에 주입
    $body.find('#fileSearchFormId')[0].files = container.files;
    $body.find('#fileSearchFormId').eq(0).trigger('change'); // 업로드 트리거
  });
}

위 방법대로 하면 사용자 인터랙션 없이도 html file 입력창에 기본 이미지파일을 등록가능하며 그 입력폼을 전송하여 서버에 파일을 전송가능!