Spring Boot+Elementファイルフォームアップロードファイルと同期アップロード

ビジネスロジックでは、記録を追加してから、sql操作で返されたidを追加することで、対応する一意のファイル名を生成する必要があります.el-uploadは自動的にアップロードされません.以下に説明します.

    
    jpg/png  ，    500kb

プレビューを生成するには、el-uploadの画像プレビュー付きコントロールがURLを正常にアップロードしなければならないため、このような同期アップロードでは、そのプレビュー付きel-uploadは使用できません.
自動アップロードをオフにする:auto-upload=「false」を設定します.
:http-request=「httpRequest」でel-uploadアップロード時にトリガーする方法を指定します
Actionバックグラウンドのコントローラパスを直接書いてもいいです.書き方をしなくてもいいです.
Limitはその名の通りアップロードされたファイルの数を制限します
:on-removeとか操作応答に対応する方法が読めないelementの公式マニュアルにあるel-uploadが書いてあります
file-listとは、ファイルが格納されている配列を指定します.
フォームが検証されたらhttpRequestメソッドを呼び出してフォームとファイルを一緒にアップロードすれば同期してアップロードできると思います

					SubmitForm : function (formName){
						this.$refs[formName].validate((valid) => {
							if (valid) {
								if(this.file==null){
									this.$message.error('      ');
								}else{
									this.httpRequest();
								}
							} else {
								this.$message.error('       ');
								return false;
							}
						});
					},

コントロールがファイルを選択するときにfile ChangeメソッドをトリガーしてファイルとファイルリストオブジェクトをVueの変数に割り当てたので、フォーム検証が通過したときにファイルが空かどうかを判断します削除方法でファイルを削除する必要があります

fileChange:function(file,fileList){
	this.file=file;
	this.fileList = fileList;
},

私は1つのファイルしかアップロードしないので、1つのファイルを削除します.ファイルリストなら自分でコードを追加すればいいです.

handleRemove: function(file){
	this.file=null;
},

ファイル数を制限する関数

handleExceed:function(files, fileList){
	this.$message.warning(`       1    `);
}

最も重要なhttpRequest()メソッドフォームとともにファイルをアップロードするには、いくつかの重要なajax設定があります.

httpRequest:function(param){
	  let url = ""
	  let fd = new FormData()// FormData   
	  fd.append('file', this.file.raw)//        el-upload             .raw    
	  //   spring boot                  "object"
	  fd.append('something', this.ruleForm.something)//             
	  //    contentType:false,   springboot   the request was rejected because no multipart boundary was found
	  //                
	  // processData   false  jquery        jquery          
	  //cache: false,            post      
	  //async: false                
	$.ajax({
		url:url,
		type:"post",
		processData:false,
		async: false,
		cache: false, 
		contentType:false,
		data:fd,
		success: res => {
			console.log(res);
			if (res.code == 200) {
				this.$message({
					message: res.msg,
					type: 'success'
				});
			} else {
				this.$message.error(res.msg);
			}
		}
	});
},

次にspring bootコントローラメソッドでパラメータを追加するだけで

 @RequestParam("file") MultipartFile filename,HttpServletRequest request

フォームファイルを受け取り、フォームの他のパラメータをrequestで受信して操作できます.
このお兄さんを見たアナウンサーの茅塞顿が開いた住所も添付しますhttps://www.cnblogs.com/shihaiming/p/10410562.html