Компоненты. Отправить запрос с файлом через vue.http.post()

Question

У меня есть компонент vuejs2 на странице (компонент одного файла). Это простое загрузочное модальное окно с одним вводом файла. Мне нужно только, чтобы загрузить один файл (без загрузки mutlifile или т.п.)

Что в файле:

<template> 
<div class="modal fade" id="upload-file-modal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">Upload file</h4> 
      </div> 
      <form id="app-file-upload-form" name="appFileUploadForm" @submit.prevent="uploadAppFile" novalidate enctype="multipart/form-data"> 
       <div class="modal-body"> 
        <div class="form-group"> 
         <label for="app-file-fileinput">File</label> 
         <input type="file" name="file" id="app-file-fileinput" class="form-control" v-el="file" @change="attachFile"> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="submit" class="btn btn-primary">Upload</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

<script> 
export default { 
    data() { 
     return { 
      file: '' 
     } 
    }, 

    methods: { 
     attachFile(e) { 
      var files = e.target.files || e.dataTransfer.files; 

      if (!files.length) 
       return; 

      this.file = files[0]; 
     }, 

     uploadAppFile() { 
      console.log(this.file); 
      Vue.http.post('/api/v1/apps/' + this.appId + '/files', { file: this.file}).then((response) => { 
       console.log(response); 
      }, (response) => { 
       console.log(response); 
      }); 
     } 
    } 
} 

Так у меня есть контроллер Laravel для ручки это ,

public function upload(Request $request) 
{ 
    $attachedFile = $request->file; 

    return response()->json($request->all()); 
} 

Я положил ответный ответ-> json() для своего рода отладки. Когда я прикрепляю файл, файл прикрепляется к полю компонента (модели?), А не пуст. Но когда vue.http.post происходит, файл приходит в пустой объект.

Первый - console.log (файл) Второй ответ сервера.

Я также попытался с FormData() ... это не сработало. ps: i cut версия поле из кода.

Answer 1

После нескольких раз с formdata я получил загрузку файлов. Просто поместите метод переменной внутри.

uploadAppFile() { 
    let data = new FormData(); 
    data.append('file', this.file); 

    Vue.http.post('/api/v1/apps/' + this.appId + '/files', data).then((response) => {}); 
}