1

我有一个用于浏览文件的组件，我用它来选择要上传的文件。这是我的组件：

       <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('文件'+ JSON.stringfy(this.file))

我将 File {} 作为一个空对象。

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

提前致谢。

4

1 回答 1

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',
      // ...
    }
}) // ...
于 2018-06-25T11:04:07.577 回答