Springboot+Vue implements uploading files and related information at the same time
1. Implementation methods and ideas
1: Perform string concatenation directly in
<el-upload>the:actionproperties.
2: Add the relevant information filled in the file and form to theajaxparameters and send it to the background.
2. Path string concatenation method
- Disadvantages: Limited message length
- Advantages: high development efficiency
- Front-end form building
<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>
- Front-end js method
// 数据
data(){
return{
docForm: {
groupId: 0,
keywords: ''
},
upload: {
title: "",
handers: {
Authorization: window.sessionStorage.getItem('tokenStorage')}
url: "/doc/uploadFileWithFormData"
}
}
},
// 方法
methods: {
submitFileForm(){
this.$refs.upload.submit();
}
}
- Background receiving method
@ApiOperation(value="参数拼接版-文件上传")
@PostMapping("/uploadFileWithFormData")
public RespBean uploadFile(MultipartFile file,Integer groupId,String keywords) throws Exception{
return docService.uploadFile(file,groupId,keywords);
}
3. Form-data parameter passing method
- You need to write the upload method yourself, so
<el-upload>there is no action or headers required in the control. - Note in this method that the form-list stores objects one by one. The .raw of the form-list object is the file itself. If the objects in the form-list are directly transmitted to the background, the object type must also be used for background reception. So the binary file of the file is transferred directly here, the key statement:
params.append('file', this.myFileList[0].raw);.
- Front-end form building
<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>
- Front-end js method
// 数据
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);
}
}
}
- Background receiving method
@ApiOperation(value="formData版-文件上传")
@PostMapping("/uploadFileWithFormData1")
public RespBean uploadFile1(MultipartFile file,Integer groupId,String keywords) throws Exception{
return docService.uploadFile(file,groupId,keywords);
}
appendix
- Service layer processing details
@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("文件上传成功");
}