{"componentChunkName":"component---src-templates-blog-post-js","path":"/vue/vue-js-파일업로드/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"8b56bc32-33c9-59d8-9743-1811ec02bfc7","excerpt":"Vue Js 뷰 파일업로드 MIME TYPE이란 이미지나 사진 동영상 파일등은 바이너리 데이터이다. 즉 0과…","html":"

\"Vue

\n

MIME TYPE이란

\n

이미지나 사진 동영상 파일등은 바이너리 데이터이다. 즉 0과 1의 조합으로 구성되어 있다. 초기 이메일 시스템에서는 본문에 들어갈 텍스트 뿐만 아니라 첨부파일도 전송 가능하게 하기 위해서 바이너리 데이터인 첨부파일을 아스키 코드로 인코딩하는 방법을 찾아야 했다. 즉, 이메일은 아스키 코드로만 주고 받고 할 수 있었다.

\n

MIME이란 Multipurpose Internet Mail Extension 이란 뜻인데, 보면 다목적의 인터넷 메일 확장이라는 뜻이다. 즉, 바이너리 데이터인 첨부파일을 아스키 코드로 인코딩하여 본문에 덧붙이겠다는 뜻이다.(Extension의 의미)

\n

보낼때 인코딩된 바이너리 데이터(사진,이미지등)가 어떤 타입인지를 명시해야 받는 측에서 그것대로 해석 할 수 있다.

\n

\"MIME

\n

보면 aaa.png라는 이미지를 마임 타입으로 변환하여 전송하고 수신자는 마임타입을 다시 원본 바이너리 데이터로 복호화 한다. 즉, 마임 타입이란 바이너리 -> 아스키 인코딩 방식이라고 보면 된다. 그리고, 그 바이너리 데이터가 어떤것이냐를 마임 타입에 명시한다. 그래야, 받는 측에서 제대로 복호화 할 수 있다.

\n

MIME TYPE의 구성

\n

개별 타입

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
메인타입설명서브 타입
text텍스트를 포함하는 모든 문서를 나타내며 이론상으로는 인간이 읽을 수 있어야 합니다text/plain, text/html, text/css, text/javascript
image모든 종류의 이미지를 나타냅니다. (animated gif처럼) 애니메이션되는 이미지가 이미지 타입에 포함되긴 하지만, 비디오는 포함되지 않습니다image/gif, image/png, image/jpeg, image/bmp, image/webp
audio모든 종류의 오디오 파일들을 나타냅니다.audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
video모든 종류의 비디오 파일들을 나타냅니다.video/webm, video/ogg
application모든 종류의 이진 데이터를 나타냅니다application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
\n

멀티파트 타입

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
메인타입설명서브 타입
multipart여러가지 타입의 데이터들을 동시에 전송할 때 사용합니다.multipart/form-data, multipart/byteranges
\n

File API

\n

브라우저는 File API 지원 한다. 아래는 File API 를 지원 하는 웹 브라우저 이다.

\n

\"File

\n

File API 는 아래와 같이 정의되어 있다.

\n\n
<!--html-->\n<input id=\"input\" type=\"file\" accept=\"text/*\" />\n<script>\n  var inputEl = document.querySelector(\"#input\")\n  inputEl.addEventListener(\"change\", function (event) {\n    // FileList\n    var fileList = inputEl.files || event.target.files\n    // File\n    var file = fileList[0]\n    var reader = new FileReader()\n    reader.onload = function (progressEvent) {\n      console.log(progressEvent.target.result)\n    }\n    reader.readAsText(file)\n  })\n</script>
\n

위 예제는 input[type=file] 로 입력받은 파일을 FileReader 로 내용을 Text 로 읽는 예제다.

\n

input file type

\n

기본적으로 브라우저에서는 보안상 로컬 파일에 직접 접근 할 수 없다. input[type=file] 는 브라우저에서 유저가 직접 로컬의 파일을 선택할 수 있게 도와준다. 이렇게 선택한 파일은 File 로 정의되고 FileList 에 담기게 된다. 이때 multiple 설정 여부와 관계없이 ArrayLike 형태인 FileList 로 담긴다. 파일을 선택하면 input, change EventHandler 가 발생되며, 선택된 파일은 HTMLInputElement.files 에 저장된다.

\n

input 의 속성

\n

input[type=file] 은 value, accept, capture, files, multiple 속성을 갖을 수 있다.

\n\n

input.value

\n

input[type=file] value 에는 파일의 경로를 가진다. 브라우저에서는 보안상 로컬 파일에 직접 접근 할 수 없으며, 로컬 파일 구조의 노출을 막고자 C:\\fakepath\\ 를 포함하여, 숨긴다. 이 경로의 브라우저마다 구현된 형태가 다를 수 있다.

\n

input.accept

\n

input[type=file] accept 는 선택 가능한 파일 종류를 설정할 수 있다. 파일은 , 로 구분하며, 아래와 같은 형태로 작성할 수 있다.

\n\n

input.capture

\n

input[type=file] capture 는 모바일 같은 특정 기기에서 capture 방법을 설정할 수 있다.

\n\n

capture 속성을 지원하지 않는 브라우저의 경우, accept=“image/*;capture=camera” 으로 사용할 수도 있다.

\n

FileList

\n

input.files 에는 선택한 파일들을 FileList 로 가진다. FileList 는 File 들을 가지는 객체이며, { [index]: File, length: number } 형태를 가진 array-like object 이다. FileList[index] 혹은 FileList.item(index) 형태로 File 에 접근할 수 있다. 이 FileList 는 Symbol(Symbol.iterator) 가 정의되어 있어, 순차적으로 참조하기 위해서, for of 를 사용할 수 있다. 혹은 Array.from() 로 변환하여 참조 할 수 있다.

\n
// javascript\nfunction (event) {\n  var fileList = event.target.files;\n  for(const file of fileList) {\n    // ...\n  }\n  Array.from(fileList).forEach((file) => {\n    // ...\n  })\n};
\n

File

\n

브라우저는 보안상 파일을 조작할 수 없다. 때문에 모든 값은 읽기 전용 이다. File 은 아래 속성을 가질 수 있다.

\n\n
File name: \"android-logo.png\"\nlastModified: 1620010077441\nlastModifiedDate: Mon May 03 2021 11:47:57 GMT+0900 (Korean Standard Time)\nsize: 27871\ntype: \"image/png\"`
\n

File 은 Blob 을 확장하여 구현되었다.

\n

Blob (Binary Large Object)

\n

Blob 객체는 파일를 text 나 2진 데이터 형태로 읽을 수 있다. Blob 은 아래 속성을 가질 수 있다.

\n\n

Blob 은 2가지 방법으로 생성할 수 있다.

\n\n
async function () {\n  const textBlob = new Blob(\n    ['😀test txt'],\n  );\n  console.log( await textBlob.text() );\n  // 😀test txt\n  const uintBlob = new Blob(\n    [new Uint8Array([240, 159, 152, 128, 116, 101, 115, 116, 32, 116, 120, 116])],\n    {type: 'text/plain'}\n  );\n  console.log( await uintBlob.text() );\n  // 😀test txt\n  const obj = { test: '😀test txt'};\n  const jsonBlob = new Blob(\n    [JSON.stringify(obj, null, 2)],\n    {type : 'application/json'}\n  );\n  console.log( await jsonBlob.text() );\n  // {\n  //   test: 😀test txt\n  // }\n  const copyBlob1 = textBlob.slice();\n  const copyBlob2 = new Blob([copyBlob1]);\n  console.log( await copyBlob1.text() );\n  // 😀test txt\n  console.log( await copyBlob2.text() );\n  // 😀test txt\n}
\n

Blob 의 내용은 3가지 방법으로 읽을 수 있다.

\n\n
function (event) {\n  var file = event.target.files[0];\n  (async function (blob) {\n    const slice = blob.slice();\n    console.log(slice);\n    // Blob {size: 12, type: \"\"}\n    const stream = blob.stream();\n    console.log(stream);\n    // ReadableStream {locked: false}\n    const text = await blob.text();\n    console.log(text);\n    // 😀test txt\n    const arrayBuffer = await blob.arrayBuffer();\n    console.log(arrayBuffer);\n    // ArrayBuffer(12) {}\n    //   Int8Array(7498)\n    //   Int16Array(3749)\n    //   Uint8Array(7498)\n    //   byteLength: 7498\n  })(file);\n};
\n

Blob ReadableStream 와 ArrayBuffer

\n

Blob.stream() 은 ReadableStream 을 반환한다. ReadableStream 은 Streams API 로 바이트 데이터 를 chunk 단위로 처리할 수 있게 도와준다. ReadableStream.getReader() 는 read 를 요청하고 다른 stream 이 발생되지 않도록 lock 을 건다 read() 으로 반환된 Promise 에서 값을 조회할 수 있다.

\n
new Blob([\"😀test txt\"])\n  .stream()\n  .getReader()\n  .read()\n  .then(({ value, done }) => {\n    const uint8array = value\n    return new TextDecoder(\"utf-8\").decode(uint8array)\n  })\n  .then(console.log)\n// 😀test txt
\n

Blob.arrayBuffer() 는 ArrayBuffer 는 반환한다. ArrayBuffer 는 수정할 수 없는 바이트로 구성된 배열 이다. ArrayBuffer 는 TypedArray (Int8Array | Int16Array | Int32Array | Uint8Array 등) 로 변환할 수 있다.

\n
new Blob([\"😀test txt\"])\n  .arrayBuffer()\n  .then(arrayBuffer => {\n    return new TextDecoder(\"utf-8\").decode(uint8array)\n  })\n  .then(console.log)\n// 😀test txt
\n

여기서 사용된 TextDecoder 는 텍스트를 UTF-8 | ISO-8859–2 같은 형태로 인코딩 혹은 디코딩 할 수 있게 도와주는 객체다. TextDecoder.decode() 는 ArrayBuffer 를 설정한 형태의 Text 로 decode 할 수 있다.

\n

Blob URL

\n

URL.createObjectURL 를 이용하면, Blob 객체를 가리키는 URL 을 생성할 수 있다. https://www.w3.org/TR/FileAPI/#blob-url URL 은 blob:${url origin}/${UUID} 로 생성된다.

\n

ex) blob:https://example.org/9115d58c-bcda-ff47-86e5-083e9a2153041

\n

해당 URL 은 생성된 탭에서만 쓸 수 있다. Blob URL 은 페이지를 떠나기 전까지 유지되기 때문에, 필요하다면 revokeObjectURL 로 해지 해줄 수 있다.

\n
var blob = new Blob([‘😀test txt’]);\nvar url = URL.createObjectURL(blob);\nconsole.log(url);\n// blob:http://localhost:8000/a1fa84dc-fd52-4435-bc22-b1cb2a7c5d84\nfetch(url)\n  .then(res => res.text())\n  .then((text) => {\n    URL.revokeObjectURL(url);\n    console.log(text);\n    // 😀test txt\n });
\n

해당 URL 은 a href 에 설정해서 다운로드 받을 수도록 설정할 수 있다. 이때 만약 revokeObjectURL 로 해지했다면 다운로드에 실패하게 된다.

\n
<!--html-->\n<a href=\"http://localhost:8000/file-path\" download=\"file.txt\"> download </a>
\n

Blob Canvas 와 createImageBitmap

\n

Canvas 로 만든 Image 는 toBlob 으로 Blob 으로 만들 수 있다. 이때 기본 type 은 image/png 이다. CanvasRenderingContext2D.drawImage() 를 이용하면, Blob 을 Canvas 에 그릴 수 도 있다. 이때 직접적으로 Blob 을 전달할 수 없고, Image 로 변환하거나, createImageBitmap 로 ImageBitmap 를 생성해서 전달해야 한다. createImageBitmap 는 ImageData | Blob 을 전달 받아 ImageBitmap 를 생성할 수 있다.

\n
<!--html-->\n<canvas id=\"canvas\" width=\"5\" height=\"5\"></canvas>\n<script>\n  var canvas = document.getElementById(\"canvas\")\n  var ctx = canvas.getContext(\"2d\")\n  var dataURL = canvas.toDataURL()\n  console.log(dataURL)\n  // data:image/png;base64,iVBORw0…\n  canvas.toBlob(blob => {\n    console.log(blob)\n    // Blob {size: 72, type: \"image/png\"}\n\n    createImageBitmap(blob).then(imageBitmap => {\n      console.log(imageBitmap)\n      // ImageBitmap {width: 5, height: 5}\n      ctx.drawImage(img, 0, 0)\n    })\n  })\n</script>
\n

FileReader

\n

FileReader 은 File 이나 Blob 의 내용을 읽을 수 있게 도와준다. 보안상 직접적인 Local Storage 에는 접근할 수 없다. FileReader 에는 4가지 방법으로 파일을 전달 할 수 있다.

\n\n

FileReader 에서 전달 받은 파일을 읽기 성공하면 load EventLinser 에 등록한 function 이 호출된다. 이외에 loadstart | progress | loadend | error 로 읽는 상태에 따라 function 이 호출 된다.

\n
function (event) {\n  const file = event.target.files[0];\n  const reader = new FileReader();\n  reader.onload = (progressEvent) => {\n    console.log(progressEvent.target.result);\n  };\n  reader.readAsArrayBuffer(file);\n  // readAsArrayBuffer ArrayBuffer(12) {}\n  reader.readAsDataURL(file);\n  // readAsDataURL data:text/plain;base64,8J+YgHRlc3QgdHh0\n  reader.readAsBinaryString(file);\n  // readAsBinaryString 😀test txt\n  reader.readAsText(file);\n  // readAsText 😀test txt\n};
\n

Network 와 File

\n

XMLHttpRequest 와 Fetch 를 이용해 Network 상의 파일을 가져올 수 있다. 이때 XMLHttpRequest.responseType 의 설정 값에 따라 응답 데이터 유형 을 설정할 수 있다. XMLHttpRequest.responseType 은 arraybuffer | blob | document | json | text 로 설정할 수 있으며 기본값을 text 이다.

\n
var imageUrl = \"http://localhost:8080/image.png\"\nvar xhr = new XMLHttpRequest()\nxhr.responseType = \"arraybuffer\" || \"blob\"\nxhr.onload = function (e) {\n  var arraybuffer = xhr.response || e.target.response\n}\nxhr.open(\"GET\", imageUrl)\nxhr.send()
\n

fetch 는 응답 데이터 가 Response 객체 로 생성되어 전달된다. Response 는 4 가지 변환 할 수 있다.

\n\n

만약 해당 형태로 변환하지 못한다면 SyntaxError 가 발생된다.

\n
var imageUrl = \"http://localhost:8080/image.png\"\nfetch(imageUrl)\n  .then(res => res.blob())\n  .then(console.log)\n// Blob {size: 75677, type: \"image/png\"}\nfetch(imageUrl)\n  .then(res => res.arrayBuffer())\n  .then(console.log)\n// ArrayBuffer(75677) {}
\n

Vue File Upload

\n

Vue 를 파일업로드 기능은 File API 를 활용하여 미리보기 이미지를 표시해주고, 파일정보를 체크하여 벨리데이션 체크 하는것 까지 간단한 예제를 살펴볼 것이다.

\n

\"Vue

\n

install axios

\n
npm install axios
\n

axios module

\n
// src/http/index.js\nimport axios from \"axios\"\n\nconst http = axios.create({\n  baseURL: \"https://testrestapi.cafe24.com\",\n  headers: { \"content-type\": \"application/json\" },\n})\n\nhttp.defaults.headers.post[\"Content-Type\"] = \"application/x-www-form-urlencoded\"\n\nexport default http
\n

View/FileUpload.vue

\n
<template>\n  <div class=\"file-upload\">\n    <form @submit.prevent=\"formSubmit\" method=\"post\">\n      <input type=\"file\" ref=\"selectFile\" @change=\"previewFile\" />\n      <ul v-if=\"selectFile\">\n        <li>lastModified : {{ selectFile.lastModified }}</li>\n        <li>lastModifiedDate : {{ selectFile.lastModifiedDate }}</li>\n        <li>name : {{ selectFile.name }}</li>\n        <li>size(byte) : {{ selectFile.size }}</li>\n        <li>type : {{ selectFile.type }}</li>\n        <li>webkitRelativePath : {{ selectFile.webkitRelativePath }}</li>\n      </ul>\n      <img v-if=\"previewImgUrl\" :src=\"previewImgUrl\" />\n      <button type=\"submit\" :disabled=\"isUploading\">Upload</button>\n\n      <div>\n        <hr />\n        response : {{ response }}\n      </div>\n    </form>\n  </div>\n</template>\n\n<script>\n  // axios module import\n  import http from \"../http\"\n\n  export default {\n    name: \"FormValidation\",\n    components: {},\n    data() {\n      return {\n        selectFile: null, // 파일 객체\n        previewImgUrl: null, // 미리보기 이미지 URL\n        isUploading: false, // 파일 업로드 체크\n        response: null, // 파일 업로드후 응답값\n      }\n    },\n    methods: {\n      previewFile() {\n        // 선택된 파일이 있는가?\n        if (0 < this.$refs.selectFile.files.length) {\n          // 0 번째 파일을 가져 온다.\n          this.selectFile = this.$refs.selectFile.files[0]\n          // 마지막 . 위치를 찾고 + 1 하여 확장자 명을 가져온다.\n          let fileExt = this.selectFile.name.substring(\n            this.selectFile.name.lastIndexOf(\".\") + 1\n          )\n          // 소문자로 변환\n          fileExt = fileExt.toLowerCase()\n          // 이미지 확장자 체크, 1메가 바이트 이하 인지 체크\n          if (\n            [\"jpeg\", \"png\", \"gif\", \"bmp\"].includes(fileExt) &&\n            this.selectFile.size <= 1048576\n          ) {\n            // FileReader 를 활용하여 파일을 읽는다\n            var reader = new FileReader()\n            reader.onload = e => {\n              // base64\n              this.previewImgUrl = e.target.result\n            }\n            reader.readAsDataURL(this.selectFile)\n          } else if (this.selectFile.size <= 1048576) {\n            // 이미지외 파일\n            this.previewImgUrl = null\n          } else {\n            alert(\"파일을 다시 선택해 주세요.\")\n            this.selectFile = null\n            this.previewImgUrl = null\n          }\n        } else {\n          // 파일을 선택하지 않았을때\n          this.selectFile = null\n          this.previewImgUrl = null\n        }\n        console.log(this.selectFile)\n      },\n\n      async formSubmit() {\n        if (this.selectFile) {\n          // Form 필드 생성\n          let form = new FormData()\n          form.append(\"file\", this.selectFile) // api file name\n          this.isUploading = true\n\n          http\n            .post(\"/api/sample/upload/\", form, {\n              headers: {\n                \"Content-Type\": \"multipart/form-data\",\n              },\n            })\n            .then(res => {\n              this.response = res\n              this.isUploading = false\n            })\n            .catch(error => {\n              this.response = error\n              this.isUploading = false\n            })\n        } else {\n          alert(\"파일을 선택해 주세요.\")\n        }\n\n        return true\n      },\n    },\n  }\n</script>\n\n<style scoped></style>
","tableOfContents":"","wordCount":{"words":965},"fields":{"slug":"/vue/vue-js-파일업로드/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue Js 뷰 파일업로드","date":"2021년 5월 2일","dateISO":"2021-05-02T15:11:34.709Z","updatedISO":null,"category":"vue","description":"라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다.","tags":["vue","javascript","framework","frontend","web","file","FormData","FileReader"]}}},"pageContext":{"slug":"/vue/vue-js-파일업로드/","previous":{"fields":{"slug":"/vue/vue-js-vee-validate/"},"frontmatter":{"title":"Vue Js Vee Validate","tags":["vue","javascript","framework","frontend","web","veevalidate","library"]}},"next":{"fields":{"slug":"/vue/vue-js-소프트웨어국제화-i18n/"},"frontmatter":{"title":"Vue Js 소프트웨어국제화(i18n)","tags":["vue","javascript","framework","frontend","web","file","FormData","FileReader"]}}}},"staticQueryHashes":["213619243","3262363727"]}