Vue自定义输入文件组件无法正确提交

Question

我有一个浏览文件的组件，我用它来 select 我想上传的文件。这是我的组件：

       <template>
        <label class="file-select">
          <div class="select-button">
            <span v-if="value">Selected File: {{value.name}}</span>
            <span v-else>Select File</span>
          </div>
          <input type="file" @change="handleFileChange"/>
        </label>
      </template>

      <script>
      export default {
        props: {
          value: File
        },

        methods: {
          handleFileChange(e) {
            this.$emit('input', e.target.files[0])
          }
        }
      }
      </script>

以下是我如何使用我的组件：

            <p>Select Image: <bim-fileinput v-model="file"></bim-fileinput></p>

以下是我使用 axios 提交文件的方式：

 submit: function(){
            console.log(localStorage.getItem('token'));
            axios.post('/api/employees', {
               picture: this.file,   

            }, { headers: { Authorization: 'Bearer '.concat(localStorage.getItem('token')) }, 'Content-Type': 'multipart/form-data' })
            .then(response => {
               router.push({ name: "IndexEmployees"});
            }).catch(error => {
                console.log(error.message);
            });
        }

提交后，在控制器中我得到了图片属性，但它是一个空数组。所以我尝试使用控制台打印它。 console.log('File '+ JSON.stringfy(this.file))

我得到了文件{} 作为空对象。

所以我需要弄清楚我的代码哪里有问题，或者如何正确地解决它。

提前致谢。

Answer 1

this.file是File的实例，当json编码时总是{}。

axios问题，必须使用FormData发送文件。

const formData = new FormData();
formData.append('picture', this.file);
axios.post('/api/employees', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
      // ...
    }
}) // ...

Vue自定义输入文件组件无法正确提交

Vue Custom input file component could not be submitted correctly

laravel-5

vue.js

vuejs2

vue-component

quasar-framework