환경

Nuxt.js, Vuetify

하고 싶은 일

<v-form> 를 사용하여 양식을 만들고 그 중 적어도 하나 이상의 사진을 요청하고 싶습니다. 그리고 얻은 사진을 표시하고 싶습니다.

사진이 없을 때

사진이 있을 때

구현

item_register.vue

<template>
  <v-card>
  <v-card-text
    v-if="!validInput"
    style="color: red"
  >
    最低一枚以上の写真が必要です
  </v-card-text>
  <v-file-input
    required
    class="pa-4"
    multiple
    label="写真を追加して下さい（複数可）"
    filled
    accept="image/*"
    prepend-icon="mdi-camera"
    @change="onChangeImage"
  />
</v-card>
</template>

<script>
export default {  
  data() {
    return {
      imageUrls: []
    }
  },
  computed(){
    // imageUrlsに写真があるときはtrue、ない時はfalse
    validInput(){
      return this.imageUrls.length > 0 ? true : false;
    },
  },
  methods(){
    // ファイルをbase64を用いて変換
    getBase64(file){
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          resolve(reader.result);
        };
        reader.onerror = error => reject(error);
      });
    },
    // ファイルが入力されたときに使うメソッド
    onChangeImage(File) {
      // 配列を一回初期化してから追加する必要がある。そうしないとどんどん写真が追加されていってしまう。
      this.imageUrls = [];
      File.forEach(file => {
        this.getBase64(file)
          .then(image => {
            this.imageUrls.push(image);
          })
          .catch(error => console.log(error));
      });
    },
  }
}
<script/>

구현에 있어서의 포인트

밸리데이션

이번에 사용한 v-file-input 라는 컴퍼넌트는 rules 프로퍼티를 지정하는 것으로 밸리데이션을 추가할 수 있다. 그러나, 이 rules에서는 이미지 사이즈의 밸리데이션등은 실장할 수 있지만, 파일수에 대해서는 잘 움직이는 rules를 설정할 수 없었다. 그 때문에 computed에 input 파일수에 의해 true/false를 돌려주는 validInput 를 실장해, 그것을 v-if 를 사용해 표시하는 것으로 밸리데이션을 실장했다.