在vue.js中更改文件输入

Question

使用纯HTML/JS,可以查看输入元素的所选文件的JavaScript File对象,如下所示:

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

但是,当将其转换为'Vue'方式时,它似乎不会按预期工作,只返回undefined而不是返回File对象数组.

这是它在我的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)
    }
  }

这样做有替代/正确的方法吗？谢谢

Answer 1

试试这个.

<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
  }
}

Answer 2

另一种方案:

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

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

Answer 3

对于所有的 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;
    }
}

Answer 4

<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() 

   }
}

@input/change在 Safari 上，您可能会遇到事件无法触发的问题。

tabindex="-1"- 这是一个让它在 Safari (13.0.2) 上运行的魔术