时间戳

首页 > 解决方案 > 渲染错误：TypeError：文件未定义

javascript - 渲染错误：TypeError：文件未定义

问题描述

我对 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();
            },

提前感谢您对此的任何帮助或见解！

标签： javascriptlaravelvue.jsvuejs2

解决方案

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

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

我认为是因为您尝试在文件为空时访问文件，所以从技术上讲，您实际上从未遍历文件，因此您没有创建文件对象。另一件事是你可以在 div 中使用我会检查 if files !== null 这样它可以避免给你任何错误。这意味着如果文件为空，它不会尝试渲染 div 内的其余内容，从而避免错误。

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

我希望这有帮助

推荐阅读