vue.js 변경에 대한 파일 입력

vue.js 변경에 대한 파일 입력

일반 HTML/JS를 사용하면 다음과 같은 입력 요소에 대해 선택된 파일의 JavaScript File 개체를 볼 수 있다.

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

그러나 'Vue' 방식으로 전환하면 의도한 대로 작동하지 않고 단순히 되돌아오는 것 같다.undefined파일 개체 배열을 반환하는 대신

내 Vue 템플릿의 모양은 다음과 같다.

<input type="file" id="file" class="custom-file-input" 
  v-on:change="previewFiles(this.files)" multiple>

어디?previewFiles함수는 단순하게 다음과 같다(방법에서 알 수 있음:

  methods: {
    previewFiles: function(files) {
      console.log(files)
    }
  }

이를 위한 대체/정확한 방법이 있는가?고마워요.

또 다른 해결책:

<input type="file" @change="previewFiles" multiple>

methods: {
   previewFiles(event) {
      console.log(event.target.files);
   }
}

이거 먹어봐.

<input type="file" id="file" ref="myFiles" class="custom-file-input" 
  @change="previewFiles" multiple>

구성 요소 옵션:

data() {
  return {
    files: [],
  }
},
methods: {
  previewFiles() {
    this.files = this.$refs.myFiles.files
  }
}

모든 TS 사용자:

<template>
<input ref="upload"
       type="file"
       name="file-upload"
       multiple=""
       accept="image/jpeg, image/png"
       @change="onUploadFiles">
</template>

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({ components: {} })
export default class MediaEdit extends Vue {

private onUploadFiles(event: InputEvent): void {
    const files: ReadonlyArray<File> = [...(this.upload.files ? this.upload.files : [])];

        files.forEach((file) => {
            console.log(`File: ${file.name}`);
        });
    }

    /** Upload element */
    private get upload(): HTMLInputElement {
        return this.$refs.upload as HTMLInputElement;
    }
}

<form ref="form">
   <input type="file" @change="previewFiles" multiple tabindex="-1">
</form>

methods: {
   previewFiles(event) {

      // process your files, read as DataUrl or upload...
      console.log(event.target.files);

      // if you need to re-use field or drop the same files multiple times
      this.$refs.form.reset() 

   }
}

Safari에서는 다음과 같은 경우에 문제가 발생할 수 있다.@input/change사건이 터지지 않는다.

tabindex="-1"- 사파리(13.0.2)에서 작동하게 하는 마술이다.

참조URL: https://stackoverflow.com/questions/45179061/file-input-on-change-in-vue-js