[VueJS] Drag&Drop으로 이미지 파일 등록

이미지 파일을 input text에 url을 입력하거나 drag&drop으로 입력하기

html

<div id="app">
  <h4>Upload Image File</h4>
  <p>
    Input Image URL and Click the button or Drag and Drop or Attach an Image
    File
  </p>
  <div class="input-group">
    <input
      type="text"
      class="form-control"
      placeholder="Input Image URL or  Drag & Drop or Select"
      v-model="filename"
      @dragover.prevent
      @dragenter.prevent
      @drop.prevent="onDrop"
    />
    <div class="input-group-append">
      <span class="input-group-text" @click="onClickFile"
        ><i class="fa fa-paperclip"> </i
      ></span>
      <button class="btn btn-outline-info" @click="onClickUpload">
        Upload
      </button>
    </div>
    <input
      type="file"
      class="file-input"
      accept="image/*"
      ref="fileInput"
      @change="onFileChange"
    />
  </div>
  <div v-show="imageSrc" class="upload-image">
    <img :src="imageSrc" />
  </div>
</div>

javascript

var app = new Vue({
  el: '#app',
  data() {
    return {
      filename: '',
      imageSrc: '',
    };
  },
  methods: {
    onDrop(event) {
      this.inputImageFile(event.dataTransfer.files);
    },
    onClickFile(event) {
      this.$refs.fileInput.click();
    },
    onFileChange(event) {
      this.inputImageFile(event.target.files);
    },
    inputImageFile(files) {
      if (files.length) {
        let file = files[0];
        if (!/^image\//.test(file.type)) {
          alert('이미지 파일만 등록이 가능합니다');
          return false;
        }
        this.filename = file.name;
        this.preview(file);
      }
    },
    onClickUpload() {
      this.preview(this.filename);
    },
    preview(file) {
      if (typeof file === 'string') {
        this.imageSrc = file;
      } else {
        let vm = this;
        let reader = new FileReader();
        reader.onload = () => {
          vm.imageSrc = reader.result;
        };
        reader.readAsDataURL(file);
      }
    },
  },
});

css

#app {
  width: 50%;
  padding: 2rem;

  .file-input {
    display: none;
  }
  .upload-image {
    padding-top: 1rem;
    width: 200px;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

실행 결과

See the Pen input drag&drop by gloria (@gloriaJun) on CodePen.