ヴュー・リソース+いるFormDataファイルアップロード

Question

私はすでにVueJSフォーラムで私の質問を：https://forum.vuejs.org/t/file-upload-with-formdata-vue-resource/20952/3

しかし！成功への私のチャンスを複製するために、私はあなたに私の問題について尋ねます。

は単純に私は（フォームの親ノードなし）入力タイプのファイルを持っていると私は私のアップロードをテストするには、私のLaravel 5.5 APIバックエンド..

に非同期でいるFormDataとヴュー・リソースHTTPでファイルをアップロードしようとしています私のコントローラは$ requestをダンプしてJSON応答を返します。

まあ、私は200のコードを持っているが、unfortunetly私の応答は空です...

は、あなたの助け:)

Request payload here

クライアントコード

export default { 
 
    name: 'profile', 
 
    data() { 
 
    return { 
 
     user: {}, 
 
     files: [], 
 
     filepath: false, 
 
     imageData: '' 
 
    } 
 
    }, 
 
    mounted() { 
 
    this.user = this.$store.getters.user 
 
    }, 
 
    methods: { 
 
    reset: function() { 
 
     this.remove() 
 
    }, 
 
    upload: function (e) { 
 
     var data = new FormData() 
 
     var file = this.files[0] 
 

 
     data.append('test', 1234) 
 
     data.append('avatar', file) 
 

 
     this.$http({ 
 
     url: this.user.actions.updateAvatar, 
 
     body: data, 
 
     method: 'POST', 
 
     responseType: 'json', 
 
     before: function (request) { 
 
      console.log(request) 
 
     } 
 
     }) 
 
     .then((response) => { 
 
     console.log(response) 
 
     }) 
 
     .catch((errorResponse) => { 
 
     console.log(errorResponse) 
 
     }) 
 
    }, 
 
    sync: function (e) { 
 
     e.preventDefault() 
 
     this.files = e.target.files || e.dataTransfer.files 
 
     if (!this.files.length) { 
 
     return 
 
     } 
 
     this.createFile(e, this.files[0]) 
 
    }, 
 
    createFile: function (e, file) { 
 
     this.filepath = URL.createObjectURL(file) 
 
    }, 
 
    remove: function() { 
 
     URL.revokeObjectURL(this.filepath) 
 
     this.filepath = false 
 
     this.files = [] 
 
     document.getElementById('avatar').value = '' 
 
    } 
 
    } 
 
}

<template> 
 
    <!-- header profile --> 
 
    <div id="profile"> 
 
     <section class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-8 col-lg-offset-2"> 
 
        <div class="profile"> 
 
         <input type="hidden" name="_method" value="PUT"/> 
 
         <header> 
 
          <label for="avatar" class="avatar" v-if="!filepath"> 
 
          <img :src="user.avatar || 'http://placehold.it/50x50'" alt="avatar"> 
 
          </label> 
 
          <div class="avatar" @click="reset" v-if="filepath"> 
 
           <img :src="filepath" alt="avatar"> 
 
          </div> 
 
          
 
<!-- Trigger a preview --> 
 
<input @change="sync" id="avatar" name="avatar" type="file" accept="image/*;" class="hide"> 
 
          
 
          <div class="info"> 
 
           <span class="name">John Snow 
 
            <router-link :to="{ name: 'UserSettings' }"> 
 
             <span class="ico gear"></span> 
 
            </router-link> 
 
           </span> 
 
           <span class="desc">Une bio de 40 caractères</span> 
 
           <span class="social"> 
 
            <span class="ico fb"></span> 
 
            <span class="ico tw"></span> 
 
           </span> 
 
          </div> 
 
         </header> 
 
<!-- Trigger upload -->      
 
<span @click="upload" class="btn-save" v-if="filepath"> 
 
    Enregistrer 
 
</span> 
 
        </div> 
 
       </div> 
 
       <div class="col-lg-8 col-lg-offset-2"> 
 
        <div class="col-lg-12"> 
 
         <router-link :to="{ name: 'UserPosts' }"> 
 
          <span for="dechet" class="nb-dechet">122 déchêts postés</span> 
 
         </router-link> 
 
         | 
 
         <router-link :to="{ name: 'UserBookmarks' }"> 
 
          <span for="dechet" class="nb-dechet">122 déchêts sauvegardés</span> 
 
         </router-link> 
 
         | 
 
         <router-link :to="{ name: 'UserTrophies' }"> 
 
          <span for="reward" class="nb-dechet">1 trophé obtenu</span> 
 
         </router-link> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </section>  
 
     <hr> 
 
     <!-- posts --> 
 
     <section class="container"> 
 
      <div class="row"> 
 
       <router-view></router-view> 
 
      </div> 
 
     </section> 
 
    </div> 
 
</template>

いただき、ありがとうございます

サーバー側コード

Route | Dummy Controller

Answer 1

コードに問題はありません。response()->json()はIlluminate\Http\UploadedFileをjsonに変換できません。

あなたのファイルがアップロードされている、

return response()->json([ 
    'avatar' => $request->file('avatar')->getClientOriginalName() 
]); 

ようにそれをチェックしてみてください、あなたは、応答ファイルの名前を取得します。

理由は、それが実装されていませんJSON応答にIlluminate\Http\UploadedFileを変換することができない理由について 理由Illuminate\Contracts\Support\Jsonable