【问题标题】：String Object File instead of the actual object字符串对象文件而不是实际对象
【发布时间】：2021-08-11 15:59:29
【问题描述】：

所以我实际上是在尝试将我的属性命名为 : ModalFile 任何要上传的文件的对象。我没有像往常一样接收对象，而是接收到一个名为“File”的字符串，当我单击它时，它显示“”[object File]”。我见过一些人告诉将参数 $event 作为参数解决这个问题，但它没有解决我的问题。

export default {
  name: 'Marketplace',
  data() {
    return {
      ModalFileName: null,
    };
  },

    onFileSelected(event) {
      const data = event.target.files[0];
      this.ModalFileName = data;
    },

<input class="file-input" type="file" name="resume" @change="onFileSelected($event)">

谢谢

【问题讨论】：

标签： javascript vue.js eslint

【解决方案1】：

您将文件对象存储在 ModalFileName 变量中。尝试这个： event.target.files[0].name

工作sn-p：

new Vue({
  el: '#app',
  data() {
    return {
      ModalFileName: null,
    };
  },
  methods: {
    onFileSelected(event) {
      this.ModalFileName = event.target.files[0].name;
      console.clear();
      console.log(this.ModalFileName)
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<input id='app' class="file-input" type="file" name="resume" @change="onFileSelected" />

【讨论】：

谢谢，但通常该文件将被命名为 ModalFile 并包含所有 event.target.files[0] 信息和属性，但我有一个带有 eslint 的小文件。现在我只想要所有这些属性，但我有“[object File]”
通常我应该这样做。 js this.ModalFileName = event.target.files[0] 但我也遇到了这个 eslint 问题.. ESLint: Use array destructuring.(prefer-destructuring)
如果您存储this.ModalFileName = event.target.files[0]，那么您的文件名将是this.ModalFileName.name。您还可以获得this.ModalFileName 中的所有其他属性。对于 Esline 问题。您可以使用 // eslint-disable-next-line 忽略该行
也谢谢我通过将空组件数据更改为空字符串来解决我的问题。