MultipartFile 이미지를 binary로 변환, 출력하기!

이번 프로젝트 때 이미지를 바이너리로 저장해서 가져온 뒤 Vue.js에 뿌려주기 로직을 개발함 

첨에 MultipartFile을 File로 변환해서 String으로 출력하는 로직을 짰다.

public String convertBinary(MultipartFile files) throws Exception{         // Normalize file name         String fileName = StringUtils.cleanPath(files.getOriginalFilename());         String out = new String();         FileInputStream fis = null;         ByteArrayOutputStream baos = new ByteArrayOutputStream();         File file = new File(files.getOriginalFilename());         try {             file.createNewFile();             FileOutputStream fos = new FileOutputStream(file);             fos.write(files.getBytes());             fos.close();             fis = new FileInputStream(file);         } catch (FileNotFoundException e) {             System.out.println("Exception position : FileUtil - fileToString(File file)");         }         int len = 0;         byte[] buf = new byte[1024];         try {             while ((len = fis.read(buf)) != -1) {                 baos.write(buf, 0, len);             }             byte[] fileArray = baos.toByteArray();             out = new String(Base64.encodeBase64(fileArray));             fis.close();             baos.close();         } catch (IOException e) {             e.printStackTrace();         }         return out;     }

자꾸 file이 local에 생기는 현상 발견 ^^.. 

매우 짜증났음 중간에 trasferTo 로직으로 바꿔도 파일이 로컬에 자꾸 생성되버려서 file로 바꾸지 않고 바로 multipartfile로 사용하는 방법을 찾던 중 발견함 

public String convertBinary(MultipartFile files) throws Exception{         String fileName = StringUtils.cleanPath(files.getOriginalFilename()) ;         BufferedImage image = ImageIO.read(files.getInputStream());         ByteArrayOutputStream baos = new ByteArrayOutputStream();         ImageIO.write(image, fileName.substring(fileName.lastIndexOf(".") + 1), baos);         return new String(Base64.encodeBase64(baos.toByteArray()));     }

그닥 복잡하진않은 로직인데 짜증나서 기록해봄 

 

이렇게 출력된 binary는 

computed쪽에 아래와 같이 선언해주고 

dataUrl(){
      return 'data:image/jpeg;base64,'+ this.image
    }

실제 templete 단에 

<img :src="dataUrl">

로 호출해주면 이미지가 바로 보인다!! 

 

그럼 2만