[Vue] 파일업로드 사이즈 / 용량 체크

1. 사이즈 용량 체크

isValid() {
 // HTML에서 파일 업로드 input을 가져옵니다.
 const fileInput = this.$refs.fileInput
 
 // 파일 객체를 가져옵니다.
 const file = fileInput.files[0]

  // 파일의 크기를 체크합니다.
  if (file.size > 500 * 1024) {
    // 파일 크기가 500KB를 넘는 경우 처리합니다.
    alert('이미지 파일의 크기는 최대 500KB 이하이어야 합니다.');
    fileInput.value = '';
  }
}

 

 

2. 유효한 사이즈의 파일만 업로드시키기

multiCapture() {
      // HTML에서 파일 업로드 input을 가져옵니다.
     const fileInput = this.$refs.fileInput
    
      // 파일을 읽기 위한 FileReader 객체를 생성합니다.
      var reader = new FileReader();
    
      // 파일 로드가 완료되면 실행될 콜백 함수를 정의합니다.
      reader.onload = function(event) {
        // 이미지 객체를 생성합니다.
        const image = new Image();
    
        // 이미지 객체의 로드가 완료되면 실행될 콜백 함수를 정의합니다.
        image.onload = function() {
          // 이미지 객체의 너비와 높이를 가져옵니다.
          const width = this.width;
          const height = this.height;
    
          // 이미지의 크기를 체크합니다.
          if (width > 1024 || height > 1024) {
            // 이미지가 1024px 보다 크면 에러 처리합니다.
            alert('이미지의 크기는 최대 1024px x 1024px 이하이어야 합니다.');
            fileInput.value = '';
          }
        };
    
        // 이미지 객체에 파일 데이터를 설정하고 로드합니다.
        image.src = event.target.result;
      };
    
      // FileReader 객체에 파일 데이터를 설정하고 로드합니다.
      reader.readAsDataURL(fileInput.files[0]);

},

사이즈가 유효하지 않을 때, 빈 이미지가 업로드되어서 액박이 뜨는 문제가 발생하였는데

file의 value 를 초기화 시켜줌으로 인해, 이미지가 업로드 되지 않게 해준다.