[Nuxt.js]파일 업로드 확장자 검사 추가

📌 확장자 검사 추가 하기

기존 파일업로드 구현 포스트 에 확장자를 검사하는걸 놓치고 넘어가서 기존 코드에 Validation 추가 해주는 형식으로 작성

1. common.js 에 file을 체크할 Validation 함수 작성

export const fileValid = {
  check(file, maxSize, extension) {
    if (!file) {
      return null;
    }
    if (!this.isValidSize(file, maxSize) || !this.isValidExtension(file, extension)) {
      return null;
    }
    return file;
  },

  getExtension(filename) {
    if (filename.includes('.')) {
      const parts = filename.split('.');
      return parts[parts.length - 1].toLowerCase();
    } else {
      return '';
    }
  },

  isValidSize(file, maxSize = 0) {
    return !(file.size > maxSize && maxSize > 0);
  },

  isValidExtension(file, extension = '*') {
    if (typeof extension === 'string') {
      extension = [extension];
    }
    if (!extension || extension.includes('*')) {
      return true;
    }
    extension.forEach((v, i) => {
      extension[i] = v.replace(/\.|(\s*)/g, '').toLowerCase();
    });
    const fileExtension = this.getExtension(file.name);
    return extension.includes(fileExtension);
  }
};

2. 파일 업로드 수정

//수정 전
<input
              ref="fileUpload"
              type="file"
              accept="image/jpg, image/jpeg, image/png, image/gif, .pdf, .zip"
              class="is-blind"
              multiple
              @change="fileChange($event, index)"
 />

async fileChange(e, index) {
      if (e.target.files && e.target.files[0]) {
        const file = e.target.files[0];
        const size = file.size / 1024 / 1024;
        if (size <= 10) {
          const formData = new FormData();
          formData.append('files', file);
          await this.$axios.$post('/file', formData).then((fileForm) => {
            this.detailData.files[index] = fileForm;
          });
        } else {
          this.modal.isFileError = true;
        }
        e.target.value = null;
        e.target.files = null;
        this.$forceUpdate();
      }
    },
      
//수정 후
<input
              ref="fileUpload"
              type="file"
              accept=".jpg, .jpeg, .png, .gif, .pdf, .zip"
              class="is-blind"
              multiple
              @change="fileChange($event, index)"
 />

async fileChange(e, index) {
      if (e.target.files && e.target.files[0]) {
        const file = e.target.files[0];
        const maxSize = 10 * 1024 * 1024;
        const extension = e.target.accept.split(',');
        const isValid = fileValid.check(file, maxSize, extension) !== null;
        if (isValid) {
          const formData = new FormData();
          formData.append('files', file);
          await this.$axios.$post('/file', formData).then((fileForm) => {
          this.detailData.files[index] = fileForm;
          });
        } else {
          this.modal.isFileError = true;
        }
        e.target.value = null;
        e.target.files = null;
        this.$forceUpdate();
      }
    },

💫 번외

input Validation 체크 함수 추가

  data() {
    return {
      feedback: {
        title: {
          isValid: true,
          text: '제목을 입력해 주세요.'
        },
        startDate: {
          isValid: true,
          text: '진행기간을 선택해 주세요.'
        },
        endDate: {
          isValid: true,
          text: '진행기간을 선택해 주세요.'
        }
      }
    };
  },
 
 isValidate() {
      const clearValid = () => {
        Object.entries(this.feedback).forEach(([key, value]) => {
          value.isValid = true;
        });
      };

      const isClearForm = () => !Object.values(this.feedback).find((value) => value.isValid === false);
      const { title, startDate, endDate } = this.detailData;

      clearValid();

      if (!title) {
        this.feedback.title.isValid = false;
      }
      if (!startDate || startDate === 'Invalid Date') {
        this.feedback.startDate.isValid = false;
      }
      if (!endDate || endDate === 'Invalid Date') {
        this.feedback.endDate.isValid = false;
      }
      return isClearForm();
    },