Ошибка при рендеринге: TypeError: файл не определен

Question

Я довольно новичок в Vue и не до конца понимаю ошибку, которую я поставил в качестве заголовка.Я читал другие сообщения об этой ошибке и не смог выяснить, как решить эту проблему для моего проекта.Я пытаюсь сделать загрузчик файлов, который написан на Vue и взаимодействует с Laravel на бэкэнде.Я понимаю, что это свойство не определено, однако, прежде чем я попытаюсь загрузить файл, все выглядит нормально.Файлы на самом деле загружаются очень хорошо в бэкэнде, но после его загрузки я получаю эту ошибку в консоли, когда она пытается отобразить:

[Vue warn]: Ошибка при рендеринге: "TypeError: file isundefined "
найдено в ---> в ресурсах / js / components / ActionLogComponent.vue

Вот соответствующий код:

<div class="form-group filezone">
    <input type="file" id="files" ref="files" multiple v-on:change="handleFiles()" />
    <p>Drop files here <br>or click to search.</p>                  

    <div v-for="(file, key) in files" class="file-listing">
        <img class="preview" v-bind:ref="'preview' + parseInt(key)" /> {{ file.name }}
        <div class="success-container" v-if="file.id > 0">
            Success
            <input type="hidden" :name="input_name" :value="file.id" />
        </div>
        <div class="remove-container" v-else>
            <a class="remove" v-on:click="removeFile(key)">Remove</a>
        </div>
    </div>

    <a class="submit-button" v-on:click="submitFiles()" v-show="files.length > 0">Submit</a>
</div>

А вот соответствующая частьэкспорта из файла vue

export default {
        props: ['companyName', 'userFullName', 'input_name', 'post_url'],
        data() {
            return {
                actions: [],
                files: [],
                viewing: '',
                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                createAction: {
                    errors: [],
                    date: '',
                    company: '',
                    name: '',
                    communication_type: '',
                    contact: '',
                    current_status: '',
                    action_item: ''
                },
                archiveAction: {
                  id: ''
                },
                url: ''
            }
        },

У меня есть метод в части методов, которая обрабатывает загрузку файла.

submitFiles() {
              for(let i = 0; i < this.files.length; i++) {
                if(this.files[i].id) {
                  continue;
                }

                //create form data to send
                let formData = new FormData();

                formData.append('file', this.files[i]);
                formData.append('viewing', this.viewing);

                axios.post('/upload-product-file', 
                  formData,
                  {
                    headers: {
                      'Content-Type': 'multipart/form-data'
                    }
                  })
                  .then(function(data) {
                    this.files[i].id = data['data'].id;
                    this.files.splice(i, 1, this.files['id']);
                    console.log('success');
                  }.bind(this))
                  .catch(function(error) {
                    console.log(error);
                  });

                  console.log('Just uploaded image. Files array should come next.');
                  console.log(this.files);
              }
            }

ОБНОВЛЕНИЕ Код для handleFiles ():

handleFiles() {
              let uploadedFiles = this.$refs.files.files;

              for(var i = 0; i < uploadedFiles.length; i++) {
                this.files.push(uploadedFiles[i]);
              }

              this.getImagePreviews();
            },

Заранее спасибо за любую помощь или понимание этого!

Answer 1

Я провел большую часть дня, стуча головой об стену с этой проблемой, и так как я следовал учебному пособию, чтобы помочь мне построить это, я решил снова и снова проходить код, построчно.Оказывается, в методе submitFiles есть такая строка:

this.files.splice(i, 1, this.files['id']);

, которая фактически удаляет один элемент из массива файлов.Я не уверен, имел ли автор учебника конкретное намерение для этой строки кода или нет, но они не объяснили, для чего он был.Я понял, что это происходит, хотя он удаляет один элемент массива на каждой итерации цикла for, который в какой-то момент очищает весь массив.Когда я закомментировал эту строку, я больше не получаю ошибку.Я не знаю, что это на самом деле правильный ответ на мою проблему, но сейчас я просто побегу с ним, так как Vue больше не жалуется.

Answer 2

Попробуйте добавить файл к экспорту данных.

data() {
return {
   actions: [],
   file: '',
   files: [],
   viewing: '',

Я думаю, это потому, что вы пытаетесь получить доступ к файлу, когда файлы пустые, так что технически вы фактически никогда не просматриваете файлы, поэтому вы не создаете объект файла.,Другое дело, что вы можете использовать в div, я бы проверил, если файлы! == null, таким образом, это позволит избежать ошибок.это означает, что если файлы имеют значение null, он не пытается отобразить все остальное внутри div, избегая ошибок.

Вот хорошее прочтение по этому вопросу https://medium.com/devmarketer/how-to-add-conditional-statements-to-v-for-loops-in-vue-js-c0b4d17e7dfd

Надеюсь, это поможет