VueのAxiosがサーバーに画像をアップロードしない

Question

FormDataを使用して画像をアップロードし、他のデータを送信したいとき。 Axiosは画像をシリアライズしているようだ。したがって、Axiosを使用して画像をアップロードすると、画像はボディのペイロードの内部に文字列として格納されます。その結果、リクエストからアップロードされたイメージを取得するために、サーバー側でMulterを使用することができません。

これは私のVueのコードです：

export default() { 
 
    name: 'app', 
 
    data() { 
 
    image: '' 
 
    }, 
 
    methods: { 
 
     onFileChange (e) { 
 
     var files = e.target.files || e.dataTransfer.files 
 
     if (!files.length) { 
 
     return 
 
     } 
 
     // console.log(files[0]) 
 
     // var x = files[0] 
 
     return this.createImage(files[0]) 
 
     // return new Buffer(x) 
 
    }, 
 
    createImage (file) { 
 
     // var image = new Image() 
 
     var reader = new FileReader() 
 
     var vm = this 
 

 
     reader.onload = (e) => { 
 
     // vm.image = e.target.result 
 
     vm.image = file.toString('base64') 
 
     console.log(vm.image) 
 
     } 
 
     reader.readAsDataURL(file) 
 
    }, 
 
    submitStaff() { 
 
     const formData = new FormData() 
 
     formData.append('file', this.image) 
 
     formData.append('name', this.data.name) 
 
     formData.append('username', this.data.username) 
 
     formData.append('password', this.data.password) 
 

 
     axios.post('api/myApiUrl', formData) 
 
     .then(function (response) { 
 
      console.log(response) 
 
     }) 
 
     .catch(function (error) { 
 
      console.log(error) 
 
     })  
 
    } 
 
}

<input type="file" @change="onFileChange">

要求ペイロード（ヴューとエラー）

（ポストマンで成功）要求ペイロードどの

私はこれを修正するのですか？ありがとうございました！

Answer 1

私はそれに関連する問題に直面し、私の場合、私は、私のすべての要求のデフォルト設定としてのContent-Typeを設定し、これをやっていた：私は、私の解決策の一部を覚えているとして、

axios.defaults.headers.common['Content-Type'] = 'application/json [or something]'; 

をとこの設定を削除してアップロードを有効にすることでした。私は自分のコードからその行を消去し、すべての要求がうまくいった。

あなたは警戒しなければならないもう一つは、あなたにフィールド名です：できるだけ早く私はそれを削除し、私は私のヘッダが（添付画像を参照し、Content-Typeのエントリを注意してください）このに変更要求することに気付くことができ<input type="file" name="file">。私は、「ファイル」と名付けられたパラメータを期待してJavaのバックエンドを持っているので、私の場合、私の入力ファイルは、次のように、私のHTML上の「ファイル」と、私のサーバー側で設定する必要があります：

public ResponseEntity<Show> create(
     @RequestParam("file") MultipartFile file, 
     RedirectAttributes redirectAttributes) { ... } 

もしあなたも、このチュートリアルを見てみることができます

<form enctype="multipart/form-data" novalidate v-if="isInitial || isSaving"> 
    <div class="well"> 
     <div class="form-group"> 
      <label>* Selecione o arquivo excel. O sistema fará o upload automaticamente!</label> 
      <div class="dropbox"> 
       <input type="file" single name="file" :disabled="isSaving" @change="filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length" 
       accept="application/vnd.ms-excel" class="input-file"> 
       <p v-if="isInitial"> 
        Solte o arquivo excel aqui<br> ou clique para buscar. 
       </p> 
       <p v-if="isSaving"> 
        Carregando arquivo... 
       </p> 
      </div> 
     </div> 
    </div> 
</form> 

、それは私の助け：https://scotch.io/tutorials/how-to-handle-file-uploads-in-vue-2

私はホップエントリー@RequestParam("file") ...

そして、HTMLファイル内

を守ってそれはあなたを助けます！