vue、java、springboot编写上传⽂件数组（主要是讲前端vue实现）⼀、业务需求
springboot是啥前端传输四个⽂件以及对应的参数到后端、后端接收这四个⽂件与对应参数，之后做判断。
⼆、所采⽤的技术
前端：vue、anxios、ant design vue
后端：springboot、springweb、java
三、实现
PS：由于我⾃认为是后端开发者，所以先写后端
1、后端实现
@RequestMapping(value="/uploadFiles",headers ="content-type=multipart/form-data", method={RequestMethod.POST})
@ApiOperation(value="上传四个⽂件，返回⾃动创建的任务参数", notes="上传四个⽂件，返回⾃动创建的任务参数")
public ResultBody uploadFiles(@ApiParam(value="⽂件数组", required =true)@RequestParam("files") MultipartFile [] files,
@ApiParam(value="所属任务组id", required =true)@RequestParam("groupId") Long groupId,
@ApiParam(value="创建⽤户id", required =true)@RequestParam("userId") Long userId,
@ApiParam(value="任务名，必须⼤于4个字符，⼩于64个字符（提⽰信息中只声明⼤于4字符）", required =true)
@RequestParam("taskName") String taskName){
if(files.length!=4){
System.out.println(files.length);
throw new GrobleException("必须上传四个⽂件！");
}
if(taskName.length()<4){
throw new GrobleException("任务名必须⼤于4个字符！");
}
if(taskName.length()>64){
throw new GrobleException("任务名必须⼩于64个字符！");
}
JSONObject object = taskService.uploadFilesAndCreateTask(files,groupId,userId,taskName);
return ResultBody.String());
后端实现主要了解⼀下springboot的web开发，和MultipartFile、headers = "content-type=multipart/form-data"这些知识。⾄于后端接收到后如何处理，这⾥就不细讲了。
2、前端实现
HTML部分，也就是vue的视图部分，主要是vue 和 ant design vue的⼀个应⽤。
<template>
<div>
<a-upload
:multiple="true"
:file-list="fileList"
:remove="handleRemove"
:before-upload="beforeUpload">
<a-button><a-icon type="upload"/>选择⽂件</a-button> </a-upload>
<a-button
type="primary"
:disabled="fileList.length === 0"
:loading="uploading"
@click="handleUpload"
>
{{ uploading ? '上传中' : '开始上传' }}
</a-button>
<font>此次已上传⽂件数：{{isLoadFiles}}</font>
</div>
</template>
CSS部分⽆
JavaScript部分主要实现部分
import axios from'axios'
export default{
name:"UploadFile",
data(){
return{
fileList:[],
tempList:[],
uploading:false,
isLoadFiles:0,
};
},
methods:{
/**
* ⽤户点击移除⽂件
**/
handleRemove(file){
const index =this.fileList.indexOf(file);
const newFileList =this.fileList.slice();
newFileList.splice(index,1);
this.fileList = newFileList;
},
/**
* 返回false表⽰选择⽂件暂不上传
**/
beforeUpload(file){
this.isLoadFiles=0;
this.fileList =[...this.fileList, file];
return false;
},
/**
* 上传⼀个图⽚数组
*/
handleUpload(){
this.uploading =true;
const formData =new FormData();
let list=this.fileList;
for(let i =0; i < list.length; i++){
formData.append('files', list[i])
}
}
formData.append("groupId",1);
formData.append("userId",1);
formData.append("taskName","demo"+new Date().getMilliseconds());
axios({
url:'192.168.1.5:8891/Task/uploadFiles',
method:'post',
processData:false,
headers:{
'Content-Type':'multipart/form-data',
},
data: formData,
}).then((data)=>{
console.log(data)
if(de==200){
this.$message.info("⽂件上传成功！");
this.isLoadFiles=this.isLoadFiles+4;
this.fileList=[];
}else{
this.$("⽂件上传失败！")
}
}).catch((error)=>{
console.log(error)
});
this.uploading=false;
}
},
}
我遇到的⼏个问题
1、请求参数的组合
主要是之前不知道世界上还有下⾯这个好⽤的对象，在组合json的时候浪费了很多时间。const formData = new FormData();
1、数组的放置
如果后端请求是接收⼀个数组，那么该这么写：
for (let i = 0; i < list.length; i++) {
formData.append('files', list[i])
}
错误⽰范(⾄少我这么写不⾏....)
formData.append('files',this.fileList);
来个笑话开⼼开⼼：
⽼师：⼩强，你的作⽂《我家的狗》和你哥哥写的⼀模⼀样，你是不是抄袭他的？⼩强：不是的，⽼师，那是同⼀条狗！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。