javascript - ファイルのアップロード時の415(サポートされていないメディアタイプ)

原文 javascript angularjs spring-boot

Angular jsとspring bootを使用してファイルをアップロードしたい。

これが私のJavaコントローラです

//upload Files

    @RequestMapping(value="/upload",headers=("content-type=multipart/*"), method=RequestMethod.POST)
    public @ResponseBody String handleFileUpload(@RequestParam("name") String name,@RequestParam("file") MultipartFile file){
        if (!file.isEmpty()) {
            try {
                byte[] bytes = file.getBytes();
                BufferedOutputStream stream =
                        new BufferedOutputStream(new FileOutputStream(new File(name)));
                stream.write(bytes);
                stream.close();
                return "You successfully uploaded " + name + "!";
            } catch (Exception e) {
                return "You failed to upload " + name + " => " + e.getMessage();
            }
        } else {
            return "You failed to upload " + name + " because the file was empty.";
        }
    }


これが私のフォームです

<section id="contact-info">


    <section id="contact-page">
        <div class="container">
            <div class="center">        

                <p class="lead">Import reports</p>
            </div> 
            <div class="row contact-wrap"> 
                <div class="status alert alert-success" style="display: none"></div>
                <form id="main-contact-form" class="contact-form" name="contact-form" method="POST" enctype="multipart/form-data" >
                    <div class="col-sm-5 col-sm-offset-1">
                        <div class="form-group">
                            <label>name *</label>
                            <input type="text" name="name" class="form-control" required="required" ng-model="rap.name">
                        </div>

            <div class="form-group">
                            <label>file</label>
                            <input type="file" name="file" class="form-control" ng-model="rap.file">
                        </div>                        

                        <div class="form-group">
                            <button type="submit"  class="btn btn-primary btn-lg"  ng-click="upload()">Import File</button>
                        </div>

                    </form> 
            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#contact-page-->


これが私のjsコントローラです

//Upload files
        $scope.upload=function(rap){
             $http.post('http://localhost:8080/upload?name='+$scope.rap.name+"file="+$scope.rap.file ,{
                     headers: { 'Content-Type': undefined },
                        transformRequest: angular.identity })

             .success(function(){

                 console.log('Post Succeded !');
             })
             .error(function(){
                 console.log('Post Failed .');
             });
        }


フォームに入力してImportFileをクリックすると、以下のエラーが発生します。
答え
$http.post('http://localhost:8080/uploadname='+$scope.rap.name+"file="+$scope.rap.file ,{
                 headers: { 'Content-Type': undefined },
                    transformRequest: angular.identity })


このメソッドの署名は少し間違っています-2番目のオブジェクトはデータです。
https://docs.angularjs.org/api/ng/service/ $ http#postをご覧ください

"file="+$scope.rap.file


マルチパートオブジェクトとしてURLを介してファイルコンテンツを投稿しようとしていますか?通常、ファイルはhttp本文に投稿されます。

また、ngModelはinput [file]の値へのバインドをサポートしていません。すべてのブラウザがJavaScriptでFileAPIをサポートしているわけではありません-たとえば、このhttps://github.com/angular/angular.js/issues/1375を参照してください

したがって、「レガシー」ブラウザをサポートする必要がある場合は、この目的のために作成されたサードパーティのngのポリフィルライブラリを使用してください(@Uzi Kilonが推奨するように)。

最新のブラウザーで問題がなければ、カスタムinput [file] onchangeハンドラーを追加して、ファイルをモデルにバインドし、サーバーエンドポイントに正しく送信できます。(AngularJS: how to implement a simple file upload with multipart form?を参照)
関連記事

java - xPathを指定すると、JavaFX webViewの要素を強調表示することは可能ですか?

javascript - 警告ボックスのスタイルを変更するには?

javascript - データベースからリストビューにjsonとphpを入力する

javascript - Angular JSフィルターが予期せず機能しますか?

javascript - mvcビューでアクション結果にリダイレクトするにはどうすればよいですか

javascript - 同じ関数でjqueryの異なるレベルのネストされたJSON値にアクセスする

javascript - 透明なHTML / CSSボタンから見えない?

javascript - keypressイベントの入力フィールドにスペースを入れない

javascript - クリックしても、Jsonからのチェックボックスにアラートが表示されない

javascript - 1つのクラスへのCSS追加の疑似要素(前、後、+その他)