파일 업로드 및 이미지 미리보기

사용 화면

• 관리자 화면에서 썸네일 등록 시 서버에 이미지 업로드 & 선택한 파일 미리보기

html

<v-file-input
	v-model="file"
    @change="previewFile(file)"
/>
<v-img :src="preview" />

script

methods: {
	previewFile(file) { //이미지 미리보기
    	const fileData = (data) => {
        	this.preview = data
        }
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.addEventListener("load", () => {
        	fileData(reader.result)
        }, false)
    },
    async uploadImage() { //이미지 업로드
    	const formData = new FormData()
        formData.append('image', this.file)
      
        const response = await this.$axios.post('api url', formData,{ 
			headers: { 'Content-Type': 'multipart/form-data' }
        })
    }
}

FileReader.readAsDataURL()
컨텐츠를 특정 Blob이나 Filed에서 읽어 오는 역할을 한다.
읽어오는 read 행위가 종료되는 경우, readStater가 done이 되며, loadend 이벤트가 트리거 되며 인코딩 된 스트링 데이터가 result 속성에 담긴다.

FormData()
form data를 key, value로 저장할 수 있는 데이터 구조

FormData.append()
객체 내부의 기존 키에 새 값을 추가하거나, 키를 추가

form & multipart/form-data

form

• name: form의 이름, 서버로 보내질 떄 이름의 값으로 데이터를 전송
• action: form이 전송되는 서버 url/html 링크
• method: 전송 방법 설정 (get/post)
• autocomplete: 자동 완정
• enctype: form data가 서버로 제출될 떄 해당 데이터가 인코딩 되는 방법 명시
  
  

entype 속성값

• application/x-www-form-urlencoded: default, 모든 문자들을 서버로 보내기 전에 인코딩됨을 명시
• text/plain: 공백 문자는 "+" 기로호 변환하지만, 나머지 문자는 모두 인코딩되지 않음을 명시
• multipart/form-data: 모든 문자를 인코딩하지 않음을 명시, 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용