Springboot+Vue实现文件与相关信息同时上传
1. 实现方法及思路
1：直接在
<el-upload>的:action属性中进行字符串拼接。
2：将文件和表单上填写的相关信息添加到ajax的参数中，一并向后台发送。
2. 路径字符串拼接法
- 缺点：信息长度有限
- 优点：开发效率高
- 前端表单构建
<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>
- 前端js方法
// 数据
data(){
return{
docForm: {
groupId: 0,
keywords: ''
},
upload: {
title: "",
handers: {
Authorization: window.sessionStorage.getItem('tokenStorage')}
url: "/doc/uploadFileWithFormData"
}
}
},
// 方法
methods: {
submitFileForm(){
this.$refs.upload.submit();
}
}
- 后台接收方法
@ApiOperation(value="参数拼接版-文件上传")
@PostMapping("/uploadFileWithFormData")
public RespBean uploadFile(MultipartFile file,Integer groupId,String keywords) throws Exception{
return docService.uploadFile(file,groupId,keywords);
}
3. Form-data传参法
- 需要自己写上传方法，因此
<el-upload>控件中不需要action，也不需要headers 。 - 此方法注意，form-list中存放的是一个一个的对象。form-list对象的.raw才是文件本身，如果直接将form-list中的对象传输到后台，后台接收也必须用object类型。所以这里直接传输文件的二进制文件，关键语句：
params.append('file', this.myFileList[0].raw);。
- 前端表单构建
<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>
- 前端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);
}
}
}
- 后台接收方法
@ApiOperation(value="formData版-文件上传")
@PostMapping("/uploadFileWithFormData1")
public RespBean uploadFile1(MultipartFile file,Integer groupId,String keywords) throws Exception{
return docService.uploadFile(file,groupId,keywords);
}
附录
- 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("文件上传成功");
}