Question

我对Vue还是很陌生，还不太了解我标题中的错误。我已经阅读了有关此错误的其他文章，还无法弄清楚如何为我的项目解决此问题。我正在尝试制作一个用Vue编写并在后端与Laravel交互的文件上传器。我知道此属性是未定义的，但是在尝试上传文件之前看起来还不错。这些文件实际上在后端上载就很好，但是在上载后，尝试显示时，我在控制台中收到此错误：

[Vue警告]：渲染错误：“ TypeError：文件未定义”
在发现 --->在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: '',

我认为是因为您试图在文件为null时访问文件，因此从技术上讲，您实际上从未遍历文件，因此您没有创建文件对象。另一件事是您可以在div中使用，我会检查文件！== 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不再抱怨，因此现在我将继续使用它。

呈现错误：TypeError：文件未定义

2 个答案: