Vue Пользовательский компонент входного файла не может быть представлен правильно - PullRequest
Новая
       19

Vue Пользовательский компонент входного файла не может быть представлен правильно

0 голосов
/ 25 июня 2018

У меня есть компонент для просмотра файлов, который я использую для выбора файла, который я хочу загрузить. Вот мой компонент: 

       <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))

У меня есть файл {} как пустой объект.

Так что мне нужно выяснить, где проблема в моем коде или как ее правильно сделать.

Заранее спасибо.

1 Ответ

0 голосов
/ 25 июня 2018

this.file является экземпляром файла , всегда при кодировании json {}.

Проблема в axios, вы должны использовать FormData для отправки файла. 

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