웹에서 아이폰사진 확장자 .HEIC사진 파일 업로드하기

웹에서 아이폰 사진 업로드가 안되는데!!!

토이프로젝트를 만들며 만난 문제가있다. 아이폰에서는 사진 확장자가 .HEIC파일이라 업로드가 되지않는 것이다. 찾아보니 아직 브라우저에서는 .HEIC 파일을 읽지 못하고있어 .HEIC 파일을 업로드 못하게 하던가 업로드전에 사진을 변환해 주는 작업을 해야된는거 알게 되었다.

 

개인적으로 고민 하면 2가지 해결 방법이 나왔다

1. 업로드 하기전에 .heic파일을 업로드 하지 못하게 막는다

2. 업로드 하기전에 .heic를 브라우저가 읽을수 있는 파일로 바꿔준다

나는 해결 방법을 2번을 선택하였다. 선택한 이유는 지금 만들고있는 프로젝트의 타겟 유저들이 대부분 아이폰 유저이기 떄문에 .HEIC파을을 못올리게 막는다면 UX측면에서 접근성이 현저하게 떨어지게 된다고 생각해서 2번을 선택하게 되었다.

 

해결방법

1. 이전과 동일하게 파일업로드를 통해 파일을 받아온다.

2. 파일 확장자가 .HEIC파일이변 파일을 변환해주고 아니면 넘어간다.

3. .HEIC를 변환한후 파일객채로 만들어준다.

4. 만들어준 파일을 다른 변수에 푸쉬해주고 사용한다.

 

import heic2any from "heic2any";

let temp = [];
const imageUpload = async () => {
  await heic2any({
    blob: file,
    toType: "image/jpeg",
  })
    .then((result) => {
      const file = new File([result], `${photoToAdd[i].name.split(".")[0]}.jpg`, {
        type: "image/jpeg",
        lastModified: new Date().getTime(),
      });
      temp.push({
        id: file.name,
        url: URL.createObjectURL(file),
        file,
      });
    })
    .catch((error) => console.error(error));
};

 

여기서 React를 사용해서 만들고 있으면 한가지 오류가 생긴다.

리액트에서 빌드를하게되면 heic2any를 불러오고 객체에 blob를 찾기 못한다는 오류가 생기게 되는데 heic2any를 전역으로 불러오지않고 함수 내부로 불러오면 해결되게된다.

 

const temp = [];
const imageUpload = async (e) => {
  const photoToAdd = e.target.files;
  for (let i = 0; i < photoToAdd.length; i++) {
    if (photoToAdd[i].name.split(".")[1] === "HEIC") {
      const heic2any = require("heic2any");
      await heic2any({
        blob: photoToAdd[i],
        toType: "image/jpeg",
      })
        .then((result) => {
          const file = new File([result], `${photoToAdd[i].name.split(".")[0]}.jpg`, {
            type: "image/jpeg",
            lastModified: new Date().getTime(),
          });
          temp.push({
            id: file.name,
            file,
            url: URL.createObjectURL(file),
          });
        })
        .catch((error) => console.error(error));
    }
  }
};

이렇게 하면 .heic파일을 변환하여 사용할수 있게된다

 

이후 빌드하면 heic2any크기가 조금 큰걸을 볼수있다. 이후 이 문제를 해결해보기로하자