Блог

Главная - Вопросы по программированию - Файл строкового объекта вместо фактического объекта

Файл строкового объекта вместо фактического объекта

#javascript #vue.js #eslint

Вопрос:

Поэтому я на самом деле пытаюсь присвоить своему свойству имя : ModalFile объект для загрузки любого файла. Вместо того, чтобы получать объект как обычно, я получаю строку с именем «Файл», и когда я нажимаю на нее, она говорит «»[объектный файл]». Я видел некоторых людей, которые просили указать параметр $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)">

Спасибо

Ответ №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" />

Комментарии:

1. Спасибо, но обычно файл будет называться ModalFile и будет содержать все event.target. файлы[0] информация и свойства, но у меня есть небольшая проблема с eslint. Теперь мне просто нужны все эти свойства, но вместо этого у меня есть «[объектный файл]».

2. Обычно я должен это делать. js this.ModalFileName = event.target.files[0] но у меня тоже есть проблема с eslint.. ESLint: Используйте деструкцию массива. (предпочитаю-деструктурирование)

3. если вы храните this.ModalFileName = event.target.files[0] , то ваше имя файла будет таким this.ModalFileName.name . Вы также получаете все остальные свойства внутри this.ModalFileName . Для проблемы Esline. Вы можете игнорировать строку, используя // eslint-disable-next-line

4. Спасибо также, что я решил свою проблему, изменив данные нулевых компонентов на пустую строку.

Метки: