尝试加载图像文件时出错 - Vuejs答案

【问题标题】：Error when trying to load image file - Vuejs尝试加载图像文件时出错 - Vuejs
【发布时间】：2019-07-24 06:25:19
【问题描述】：

我正在加载一个 Vue.js 图像文件。这就是我得到错误的方式：

[Vue 警告]：“更改”的事件处理程序出错：“TypeError：无法读取未定义的属性‘文件’”

我也收到如下错误。我该如何解决？

必填字段已满，但为空。

还有：

[“此字段为必填项。”]

这是我的代码：

<template>
    ...
    <el-input type="file" @change="onFileChanged"/>
    ...
</template>
<script>
    ...
    methods: {
        onFileChanged(event) {
          const file = event.target.files[0]
          console.log(file)
        },
    }
    ...
</script>

【问题讨论】：

标签： vue.js

【解决方案1】：

根据错误event.target 是undefined 并且您正在尝试在undefined 上调用files[0]。

请确保将参数$event 传递给onFileChanged()，无论您在何处调用此方法，如下所示：

<el-input type="file" @change="onFileChanged($event)"/>

【讨论】：