vue.js 中更改的文件输入
使用纯 HTML/JS，可以查看输入元素的选定文件的 JavaScript 文件对象，如下所示：
<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)
}
}
有替代/正确的方法吗？谢谢
this.files 在您的 Vue 示例中指向什么？
this.files 应该是一个 File 对象数组，就像在纯 HTML 示例中一样，如此处所示 - developer.mozilla.org/en-US/docs/…
另一种解决方案：
<input type="file" @change="previewFiles" multiple>
methods: {
previewFiles(event) {
console.log(event.target.files);
}
}
尝试这个。
<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
}
}
对于所有的 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;
}
}
<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) 上运行是一个魔术
