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

JavaScript

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

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

第633篇《vue.js中更改时的文件输入》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
飞云猪猪前端 2020.03.11 
<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）上运行是一个魔术

神无老丝Davaid 2020.03.11

尝试这个。

<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

另一个解决方案：

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android