Question

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

       <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自定义输入文件组件无法正确提交

1 个答案: