呈现错误: TypeError: file是未定义的

Question

我对Vue相当陌生，也不完全理解我把它作为标题的错误。我已经读过关于这个错误的其他文章，并且还没有想出如何为我的项目解决这个问题。我正在尝试制作一个文件上传器，它是用Vue编写的，并在后端与Laravel交互。我知道这个属性是未定义的，但是在我试图上传一个文件之前，它似乎很好。这些文件实际上在后端上传得很好，但是在上传之后，当它试图显示时，我在控制台中得到了这个错误：

Vue警告:呈现错误："TypeError: file是未定义的“ 发现于-->在resources/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

尝试将文件添加到数据导出中

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

我认为这是因为您试图访问文件，而文件是空的，所以从技术上说，您从来没有遍历过这些文件，所以没有创建文件对象。另一件事是，您可以在div中使用我将检查的if文件!== null，这样可以避免出现任何错误。也就是说，如果文件为null，它就不会尝试呈现div中的其余内容，从而避免错误。

在这个https://medium.com/devmarketer/how-to-add-conditional-statements-to-v-for-loops-in-vue-js-c0b4d17e7dfd上有一个很好的读物

我希望这能帮到你

Answer 2

我花了一天的大部分时间用这个问题把我的头撞到墙上，因为我遵循了一个教程来帮助我构建这个问题，所以我决定再次逐行检查代码。在submitFiles方法中，有这样一行：

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

它实际上从文件数组中删除了一个元素。我不确定教程的作者是否对这一行代码有明确的意图，但他们没有解释它的用途。不过，我意识到，每次for循环迭代时，它都会删除数组中的一个元素，在某个时候会清空整个数组。当我将这一行注释掉时，我就不再理解错误了。我不知道这实际上是我的问题的正确答案，但现在我将只使用它，因为Vue不再抱怨。