SpringBoot - ファイルアップロード - いるFormData、AJAX、および受信MultipartFile

＃フロントエンド

##フォームのアップロード

<form action="/demo/upload" method="POST" enctype="multipart/form-data">
    <input id="file" type="file" name="mFile"/>
    <input type="submit" value="上传"/>
</form>

背景バイナリレセプション：

• このように、ラベルが書かれた形式でなければなりません。
• そして、アクション、方法、およびのenctype属性が存在しなければなりません
• とentype属性値は、マルチパート/フォームデータでなければなりません

## AJAXのアップロード

<h3>图片上传</h3>
<input type="file" name="file">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script><!-- jquery -->
<script type="text/javascript">
$(`[type='file']`).bind("change", function(){ //加载md文件
    let files = this.files;
    if(files.length){
    	let file = files[0] ;
    	let name = file.name;//读取选中文件的文件名
        let size = file.size;//读取选中文件的大小
        let formData = new FormData() ; 
        formData.append("mFile" , file) ;
        formData.append("name" , name) ; 
    	$.ajax({
    		url : '/demo/upload' , 
    		type: "POST" , 
    		data: formData,
    		processData: false , //告诉 jQuery 不要对参数进行处理
    		contentType: false , //高数jQuery 不要对contentType做处理，服务器会处理
    		success: function(result) {
    			console.log(result)
    		}
    	}) ;
        
    	console.log(url , name , avatar);
    }
});
</script>

JavaScriptのいるFormData手動でビルドフォームオブジェクトの使用は、
バイナリデータファイルが直接に取得するためにjQueryを使用することができ、
その後、AJAXを介してサーバに送信することができます。

このメソッドを使用すると、以下の点に注意しなければなりません。

• フォームデータを行わなければならないFormDataのビルドに
• processData 偽でなければならない、プロセスパラメータへのjQueryを教えていません
• contentType 偽でなければならない、サーバーが処理を行います、contentTypeの処理を行うためのjQueryを教えていません

＃バックエンド

## MultipartFile

次のように送信するような場合では、後端を受信することができます。

@RequestMapping("/demo/upload")
Map<String, Object> uploadFile(MultipartFile mFile) throws IOException {
    //do something...
    return null;
}

なお、

• 私たちは、MultipartFile文書のSpringMVCを受け取っ行うには、このクラスを使用して
  もそうパラメータを指定する必要があり
  、ここでMFILEを、このパラメータは、フロントエンドの値が一致に対応する名前を提出しなければなりません
  それ以外の場合は、ファイルを受信して​​いません。

完了〜

## MultipartHttpServletRequest

その場合は、フロントエンドのパラメータは、私はそれをどのように処理するかを超えるバイナリストリームデータファイルの転送に直接指定ではなく、？

MultipartFileは確かに扱うことができない
幸いなことに、強いSpringMvcパッケージがありますMultipartHttpServletRequest
直接受信パラメータに書き込むことができMultipartHttpServletRequest、その上にタイプ
何ら制約パラメータ名が存在しないので、

@RequestMapping("/demo/upload")
Map<String, Object> uploadFile(MultipartHttpServletRequest request) throws IOException {
    //do something...
    return null;
}

getXXXメソッドMultipartHttpServletRequestのシリーズはMultipartFileオブジェクト、シンプルで便利に直接得ることができます。

# 坑点：transferTo(File file)

MultipartFileはtransferTo（ファイルファイル）非常にシンプルで、粗方法をカプセル化し、オブジェクトがファイルに直接保存することができMultipartFileファイルを指定しましたが、〜

public void transferTo(File dest) throws IOException, IllegalStateException {
    this.part.write(dest.getPath());
    if (dest.isAbsolute() && !dest.exists()) {
        FileCopyUtils.copy(this.part.getInputStream(), Files.newOutputStream(dest.toPath()));
    }
}

そのインタフェースの実装クラスが書かれているでは、受信ファイルのパスは絶対パスでなければなりませんとだけにそこに書き込むことができ、何が起こっていなくても異常ではありませんそれ以外の場合は...、それは他の場所で彼らの運をピットに言うことができます

さらに、＃

基本的な操作に関連するファイルのアップロード他のものは、アイデアの3種類で、一般的に、あります

• そして、良い契約の形式、パラメータ名、サイズ制限など、フロントエンドのインターフェースはMultipartFileの使用、シンプルで原油を受け取るために、それが推奨されます
• MultipartHttpServletRequestを使用すると、要求の再取得MultipartFileからの要求を受信します
• ストリームデータ、コード面倒バイト要求を取得し、非効率的で、お勧めできません

---

• 「jQueryのファイルのアップロードとMultipartFileはピットガイドを強化しました」