Javascript 在 vue.js 中更改文件输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45179061/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
File input on change in vue.js
提问by Ash
Using plain HTML/JS, it is possible to view the JavaScript File objects of selected files for an input element like so:
使用纯 HTML/JS，可以查看输入元素的选定文件的 JavaScript 文件对象，如下所示：
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
However, when converting it to the 'Vue' way it doesn't seem to work as intend and simply returns undefinedinstead of returning an Array of File objects.
但是，当将它转换为 'Vue' 方式时，它似乎没有按预期工作，只是返回undefined而不是返回一个 File 对象数组。
This is how it looks in my Vue template:
这是它在我的 Vue 模板中的样子：
<input type="file" id="file" class="custom-file-input"
v-on:change="previewFiles(this.files)" multiple>
Where the previewFilesfunction is simply the following (located in methods):
当previewFiles函数就是（位于方法）的情况如下：
methods: {
previewFiles: function(files) {
console.log(files)
}
}
Is there an alternate/correct way of doing this? Thanks
有没有替代/正确的方法来做到这一点？谢谢
回答by oboshto
Another solution:
另一种解决方案：
<input type="file" @change="previewFiles" multiple>
methods: {
previewFiles(event) {
console.log(event.target.files);
}
}
回答by Ikbel
Try this.
尝试这个。
<input type="file" id="file" ref="myFiles" class="custom-file-input"
@change="previewFiles" multiple>
and in your component options:
并在您的组件选项中：
data() {
return {
files: [],
}
},
methods: {
previewFiles() {
this.files = this.$refs.myFiles.files
}
}
回答by Vladimir Ishenko
<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()
}
}
On Safari, you might face an issue when @input/changeevent won't fire.
在 Safari 上，当@input/change事件不会触发时，您可能会遇到问题。
tabindex="-1"- it's a magic trick to make it works on Safari (13.0.2)
tabindex="-1"- 让它在 Safari (13.0.2) 上工作是一个魔术
回答by Mike Mitterer
For all the TS-Users out there:
对于所有的 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;
}
}
