Springboot+Vue实现文件上传功能（文件与相关信息同时上传）_vue+springboot 表单和文件一起上传

1. 实现方法及思路

1：直接在<el-upload>的:action属性中进行字符串拼接。
2：将文件和表单上填写的相关信息添加到ajax的参数中，一并向后台发送。

2. 路径字符串拼接法

• 缺点：信息长度有限
• 优点：开发效率高

1. 前端表单构建

<el-dialog title="upload.title" :visible.sync="dialogVisible" width="800px" append-to-body>
	<el-form :model="docForm" class="demo-input-suffix">
		<el-form-item prop="groupId">
			<el-input v-model="docForm.groupId" :disabled="true">
				<template slot="prepend>群组编号：</template>
			</el-input>
		</el-form-item>
		<el-form-item prop="keywords">
			<el-input v-model="docForm.keywords">
				<template slot="prepend>群组编号：</template>
			</el-input>
		</el-form-item>
		<el-form-item label="上传文件">
			<el-upload
				  ref="upload"
				  accept=".xlsx, .xls"
				  drag
				  action="upload.url + '?groupId=' + docForm.groupId + '&keywords=' + docForm.keywords"
				  :headers="upload.headers"
				  :auto-upload="false"
			>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip" slot="tip">仅允许上传xls或xlsx格式文件</div>
			</el-upload>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitFileForm">确认上传</el-button>
			<el-button>取消</el-button>
		</el-form-item>
	</el-form>
</el-dialog>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2. 前端js方法

// 数据
data(){
	return{
		docForm: {
			groupId: 0,
			keywords: ''
		},
		upload: {
			title: "",
			handers: {Authorization: window.sessionStorage.getItem('tokenStorage')}
			url: "/doc/uploadFileWithFormData"
		}
	}
},
// 方法
methods: {
	submitFileForm(){
		this.$refs.upload.submit();
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. 后台接收方法

@ApiOperation(value="参数拼接版-文件上传")
@PostMapping("/uploadFileWithFormData")
public RespBean uploadFile(MultipartFile file,Integer groupId,String keywords) throws Exception{
	return docService.uploadFile(file,groupId,keywords);
}

1
2
3
4
5
6

3. Form-data传参法

• 需要自己写上传方法，因此<el-upload>控件中不需要action，也不需要headers 。
• 此方法注意，form-list中存放的是一个一个的对象。form-list对象的.raw才是文件本身，如果直接将form-list中的对象传输到后台，后台接收也必须用object类型。所以这里直接传输文件的二进制文件，关键语句：params.append('file', this.myFileList[0].raw);。

1. 前端表单构建

<el-dialog title="upload.title" :visible.sync="dialogVisible" width="800px" append-to-body>
	<el-form :model="docForm" class="demo-input-suffix">
		<el-form-item prop="groupId">
			<el-input v-model="docForm.groupId" :disabled="true">
				<template slot="prepend>群组编号：</template>
			</el-input>
		</el-form-item>
		<el-form-item prop="keywords">
			<el-input v-model="docForm.keywords">
				<template slot="prepend>群组编号：</template>
			</el-input>
		</el-form-item>
		<!-- 自己写上传方法，不需要action，也不需要headers -->
		<el-form-item label="上传文件">
			<el-upload
				  ref="upload"
				  accept=".xlsx, .xls"
				  drag
				  :on-change = "handleFileChange"
				  :auto-upload="false"
			>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip" slot="tip">仅允许上传xls或xlsx格式文件</div>
			</el-upload>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitFileForm">确认上传</el-button>
			<el-button>取消</el-button>
		</el-form-item>
	</el-form>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

2. 前端js方法

// 数据
data(){
	return{
		docForm: {
			groupId: 0,
			keywords: ''
		},
		myFileList: [], // 用于接收上传的文件
		upload: {
			title: ""
		}
	}
},
// 方法
methods: {
	// 上传方法
	submitFileForm(){
		// 创建上传的formdata
		const params = new FormData();
		// 添加文件
		params.append('file', this.myFileList[0].raw);
		// 添加相关信息
		params.append('groupId',this.docForm.groupId);
		params.append('keywords',this.docForm.keywords);
		this.postRequest('/doc/uploadFileWithFormData1/',params).then(resp=>{
			// 上传成功和上传失败的信息提示
		});
	},
	// 文件变化处理,这里注意<el-upload>的limit不能设为一，否则当再次选择文件时，此方法无法触发！
	handleFileChange(file,fileList){
		this.myFileList.splice(0,this.myFileList.length);
		this.myFileList.push(file);
		// 控件中文件内容更新（删除旧文件）
		if(fileList.length>1){
			this.$refs.upload.uploadFiles.splice(0,1);
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

3. 后台接收方法

@ApiOperation(value="formData版-文件上传")
@PostMapping("/uploadFileWithFormData1")
public RespBean uploadFile1(MultipartFile file,Integer groupId,String keywords) throws Exception{
	return docService.uploadFile(file,groupId,keywords);
}
1
2
3
4
5

附录

1. Service层处理详情

@Value("${file.fileRootPath}")
private String fileRootPath; // "/fileRoot/"

@Override
@Transactional
public RespBean uploadFile(MultipartFile file,Integer groupId,String keywords) throws IOException {
	/* 1. 将文件保存到服务器指定目录下 */
	// 1.1 创建目录
	String fileDir = fileRootPath+groupId.toString()+"/";
	File fileFatherDir = new File(fileDir);
	if(!fileFatherDir.exists()){
		boolean dirCreateIsSuccess = fileFatherDir.mkdirs();	// 如果路径不存在将创建该路径
		if(dirCreateIsSuccess == false){
			return RespBean.error("文件父目录创建失败");
		}
	}
	// 1.2 将文件信息写入文件系统
	if(!file.isEmpty()){
		// 重组文件名
		String orginalFileName = file.getOriginalFilename();
		String upFileName = orginalFileName;
		// 格式校验
		String fileSuffix = originalFileName.substring(originalFileName.lastIndexOf(".")+1).toUpperCase();
		if(!"XLS".equals(fileSuffix) && !"XLSX".equals(fileSuffix)){
			return RespBean.error("非法的文件格式！");
		}
		// 写入
		InputStream is = file.getInputStream();
		OutputStream os = new FileOutputStream(fileDir+upFileName);	// 保存文件的文件全路径
		int fileUpdateSuccess = FileCopyUtils.copy(is,os);
		if (!fileUpdateSuccess){
			return RespBean.error("文件保存失败，请联系管理员！");
		}
		// 关闭io流
		os.close();
		is.close();
	}
	
	/* 2. 调用存储过程保存相关信息到数据库 */
	// 组织相关信息
	Integer userId = commonUtils.getUserIdFromSecurity();
	String funArgs = String.format("{'xuser_id':'%d','xgroup_id':'%d','xdoc_name':'%s','keywords':'%s','xdoc_path','%s'}",userId,groupId,upFileName,keywords,fileDir) ;
	JSONObject jo = JSON.parseObject(funArgs);
	// 将组织好的信息传入存储过程调用方法(存储过程已存在)
	int uploadSuccess = operateMapper.call("op10000",jo.toJSONString());
	if(!uploadSuccess){
		return RespBean.error("文件信息保存失败");
	}
	
	return RespBean.success("文件上传成功");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52