vue.js 中更改的文件输入答案

【问题标题】：File input on change in vue.jsvue.js 中更改的文件输入
【发布时间】：2017-12-24 01:06:59
【问题描述】：

使用纯 HTML/JS，可以像这样查看输入元素的选定文件的 JavaScript 文件对象：

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

是否有替代/正确的方法来做到这一点？谢谢

【问题讨论】：

您希望this.files 在您的 Vue 示例中指向什么？
this.files 应该是一个 File 对象数组，就像在纯 HTML 示例中一样，如此处所示 - developer.mozilla.org/en-US/docs/…

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

另一种解决方案：

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

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

【讨论】：

【解决方案2】：

试试这个。

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

【讨论】：

【解决方案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;
    }
}

【讨论】：

【解决方案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() 

   }
}

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

tabindex="-1" - 让它在 Safari (13.0.2) 上运行是一个神奇的技巧

【讨论】：