javascript에서 이미지나 텍스트 파일을 압축하고자 하는 경우에 jsZip 라이브러리를 활용한다.

Inatall

npm install jszip

아래는 이미지 파일을 zip으로 압축하는 예제이다 예제 코드

/**
 * 전달받은 이미지를 zip 파일로 압축한다
 * @param imageInfo {
 * @returns {Promise<any>}
 */
function generateImageZip (imageInfo) {
  let zip = new JSZip()
  const re = /data:image\/(gif|jpg|jpeg|tiff|png);base64,/i

  return new Promise((resolve, reject) => {
    // 압축할 파일을 추가한다
    zip.file(imageInfo.name, imageInfo.uri.replace(re, ''), {base64: true})
    // blob 형태의 압축파일을 생성한다
    zip.generateAsync({type: 'blob'})
      .then(resolve)
  })
}

let imageInfo = {
  name: 'image.jpg',
  // base64 encode string
  uri: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABA'
}
generateImageZip(imageInfo)
  .then(res => {
    console.log(res)
  })

압축한 파일을 다운로드 하기

압축된 파일을 로컬에 다운하고자 하면…FileSaver 라이브러리를 이용한다

Inatall

npm install file-saver --save

예제 코드

import FileSaver from 'file-saver'

generateImageZip(imageInfo)
  .then(res => {
    FileSaver.saveAs(res, 'test.zip')
  })

압축한 파일을 formData에 담아서 업로드하기

generateImageZip(imageInfo)
  .then(res => {
    let formData = new FormData()
    formData.append('image_set_file_name', zip)

    let config = {
      headers: {'Content-Type': 'multipart/form-data'}
    }  
    axios.post('/upload-images', formData, config)
      .then(resolve)
  })