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

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

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

其中，

previewFiles

函数只包含以下内容（位于方法中）：

是否有其他/正确的方法进行此操作？谢谢，试试这个

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

另一个解决方案：

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

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

方法：{
预览文件（事件）{
log（event.target.files）；
}
}

方法：{
预览文件（事件）{
//处理您的文件，读取为DataUrl或上载。。。
log（event.target.files）；
//如果需要多次重复使用字段或删除相同的文件
这是。$refs.form.reset（）
}
}

在Safari上，当

@input/change

事件无法触发时，您可能会遇到问题

---

tabindex=“-1”

-对于所有TS用户来说，让它在Safari（13.0.2）上运行是一个魔术：

从“Vue属性装饰器”导入{Component，Prop，Vue}；
@组件（{components:{}}）
导出默认类MediaEdit扩展Vue{
专用onUploadFiles（事件：InputEvent）：无效{
常量文件：ReadonlyArray=[…（this.upload.files？this.upload.files:[]）；
files.forEach（（文件）=>{
log（`File:${File.name}`）；
});
}
/**上传元素*/
private get upload（）：HTMLInputElement{
返回此。$refs.upload作为HTMLInputElement；
}
}

this.files在您的Vue示例中，您希望它指向什么？

this.files

应该是一个文件对象数组，就像在纯HTML示例中一样，如图所示-谢谢，这正是我想要的：）乐意帮助：）@user305883当然，Vue将组件模板中具有

ref

属性的任何DOM元素添加到组件实例中的对象

$refs

，您可以在组件方法或生命周期挂钩中使用该对象直接访问DOM元素。在本例中，我们正在检索存储在

输入

中的

文件

数组，称为

myFiles

。当我使用您的解决方案

时，此文件包含
[object FileList]
。你能详细说明如何从那里检索文件名吗？Thanks@Alexis.Rolland当然，
this.files
类型是包含
File
对象的
FileList
。所以基本上你可以像使用数组一样使用它，也就是说，一个文件可以通过它的索引来访问。每个
文件
对象都有一个
名称
属性。e、 g.
this.files[0]。name
。希望这是有意义的。看起来比选择的答案更好。也许从计划JavaScript的角度来看，这看起来更好，但选择的答案看起来更vue惯用。@Antony它如何更惯用？@Antony我同意，但这与id、类等选择器相比。在本例中，我们已经有元素作为
事件.target
，
ref
只是没有添加任何内容。这是更清晰的答案。
<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
  }
}

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

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

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

   }
}