Spring Boot+Element 文件随表单上传文件 同步上传

业务逻辑里需要先添加记录再通过添加记录sql操作完返回的id来生成相应唯一的文件名，el-upload不自动上传有些坑下面描述一下

<el-upload
:action="uploadUrl()"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:on-success="handleAvatarSuccess"
:on-error="uploadFalse"
:http-request="httpRequest"
:on-change="fileChange"
 multiple
:limit="1"
:auto-upload="false"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

因为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;
							}
						});
					},

因为在控件选择文件的时候触发了fileChange方法把文件和文件list对象赋值到了Vue的变量里所以在表单验证通过的时候要判断一下文件是否为空因为删除方法里需要删除文件

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

 因为我只上传单个文件所以就删一个文件如果是文件list自己添加相应代码就行

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