vue.js中更改时的文件输入

Gil乐2020-03-11

使用纯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)
    }
  }

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

飞云猪猪前端2020/03/11 11:55:04

<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）上运行是一个魔术

神无老丝Davaid2020/03/11 11:55:04

尝试这个。

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

宝儿乐2020/03/11 11:55:04

另一个解决方案：

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer