字符串对象文件而不是实际对象

Question

所以我实际上是在尝试为我的属性 named : 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)">

谢谢

Answer 1

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

工作片段：

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" />

字符串对象文件而不是实际对象

String Object File instead of the actual object

javascript

eslint

vue.js

工作片段：