<template>
  <div>
    <label for="upload">사진 선택</label>
    <input
      id="upload"
      value=""
      type="file"
      multiple
      accept="image/*"
      @change="handleFileChange"
    />
  </div>
</template>
<style>
label {
  cursor: pointer;
}
input {
  display: none;
}
</style>

multiple

• 여러개의 파일 업로드를 허용하겠다!!!!!

accept

• 내가 원하는 파일만 받겠다!!!!!!
  • 사실 다른 파일 올려도 올라는 감....;;;
  • 다만 버튼 눌렀을 때 설정한 파일이 디폴트
• image/*는 image/ 이후 어떤 파일이든 다 받겠다는 뜻(이미지 다 받을게여~~)
• image/png처럼 특정 확장자만 설정도 가능

제일 중요한 label 컨트롤

• input type="file"이 진심 못생겼다.
• 그때 input의 display: none;으로 설정
• input의 id와 label의 for를 같은 이름 설정
• label 꾸며주면 못 생긴 input은 사라지고 예쁜 label만 남음
• 못생겼다고 숨겨지는 불쌍한 input....하지만 본질은 언제나 너야...