目录
话不多说,直接上代码,文章最后附上实现过程中可能出现的问题。
1.代码实现
前台:
<template>
<el-form ref="form" :model="form" label-width="150px">
<el-form-item label="申请人" prop="applyName">
<el-input v-model="applyName"></el-input>
</el-form-item>
<el-form-item label="导入文件" prop="uploadFile">
<el-upload v-model="form.uploadFile"
class="upload-demo"
action="#"
ref="upload"
:auto-upload="false"
:file-list="uploadFile"
:on-change="changeFile"
:headers="headers" //配置头
:multiple= true //实现多文件上传,不写的话默认是单个文件上传
>
<el-button class="btn"><i class="el-icon-paperclip"> </i>上传附件</el-button>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">确定</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name:'UploadUi',
data(){
return{
form: {},
uploadFile: [],
fileList:[],
headers: { "Content-Type": "multipart/form-data" }, //必须加这个
}
},
methods:{
//通过onchanne触发方法获得文件列表
changeFile(file, fileList) {
this.fileList = fileList;
},
submitForm() {
// 启动流程并将表单数据加入流程变量
let fd = new FormData();
this.fileList.forEach(element => {
fd.append("uploadFile", element.raw) //这里是raw,不是row 仔细仔细!
});
addFileLoad(fd).then((response)=>{ //addFileLoad是调后台的方法
if(response.code == 200){
this.$modal.msgSuccess(res.msg);
}
});
},
}
}
</script>
如果是单个文件上传 可以将changeFile方法改成如下
changeFile(file, fileList) {
this.fileList = fileList[0].raw
},
提交里直接这样写即可:
let fd = new FormData();
fd.append("uploadFile", this.fileList);
addFileLoad(fd).then((response)=>{ //addFileLoad是调后台的方法
if(response.code == 200){
this.$modal.msgSuccess(res.msg);
}
});
--------------------------------------------------------------------------------------------------------------------------------
后台:
Controller:
@PostMapping("/fileLoad/fileLoad")
public R<Void> add(@RequestParam(value = "uploadFile",required = false) MultipartFile[] uploadFile) {
if(ifileLoadService.uploadFile(uploadFile).getCode()==200){ //uploadFile将上传文件写入硬盘
for (MultipartFile file: uploadFile) {
fileLoadBo fileLoadBo = new fileLoadBo();
fileLoadBo.setFileName(file.getOriginalFilename());//获取上传文件名
fileLoadBo.setTest("测试");
ifileLoadService.insertByBo(fileLoadBo); //插入到业务表中
}
return toAjax(true);
}else {
return toAjax(false);
}
}
这里如果需要将上传的文件存入到业务表当中,就可以加入自己的逻辑在里面,本例子展示的是上传多个文件后,将文件名落入到数据表中,前台如果需要将其他的表单信息同样传到后台,那么只需要将要传递的信息在fd中追加即可。如:fd.append("key值","要传递的信息")
Service:
public interface IfileLoadService {
/**
* 新增文件上传
*/
Boolean insertByBo(fileLoadBo bo);
/**
* 文件存入硬盘
*/
R<Void> uploadFile(MultipartFile[] files);
}
实现类:
@Service
public class fileLoadServiceImpl implements IfileLoadService {
/**
* 新增文件上传
*/
@Override
public Boolean insertByBo(fileLoadBo bo) {
fileLoad add = BeanUtil.toBean(bo, fileLoad.class);
validEntityBeforeSave(add);
boolean flag = baseMapper.insert(add) > 0;
if (flag) {
bo.setFileId(add.getFileId());
}
return flag;
}
@Override
public R<Void> uploadFile(MultipartFile[] files){
if (files != null){
for(MultipartFile file : files) {
String fileName = file.getOriginalFilename();
System.out.println(fileName);
try{
File mkdir = new File("e:\\MyTest\\file");
if(!mkdir.exists()) {
mkdir.mkdirs();
}
//定义输出流,将文件写入硬盘
FileOutputStream os = new FileOutputStream(mkdir.getPath()+"\\"+fileName);
InputStream in = file.getInputStream();
int b = 0;
while((b=in.read())!=-1){ //读取文件
os.write(b);
}
os.flush(); //关闭流
in.close();
os.close();
}catch(Exception e) {
e.printStackTrace();
return R.fail();
}
}
return R.ok();
}else {
return R.fail("文件找不到");
}
}
}
2.常见问题:
问题1. Uncaught (in promise) Error: Content type 'multipart/form-data;boundary=---WebKitFormBoundary4g1AmOlvw9Ew13ih;charset=UTF-8' not supported
at _default (request.js:95:1)
解决方法:因为后端读取的是MultipartFile 类型数据,通过对请求头的类型进行判断,仅识别 multipart 开头的 Content-Type。所以我们需要修改headers 的 Content-Type。
前台:加请求头 headers: { "Content-Type": "multipart/form-data" },
后台:在Controller里去掉@RequestBody,并加上如下一句话:
@RequestParam(value = "uploadFile",required = false) MultipartFile[] uploadFile
问题2:Field error in object '*****Vo' on field 'files': rejected value [[object Object]]
解决方法:在前台取值的时候直接取raw,我们通过打印formData这个对象,本例子中为fd,可以看到这个files是个[object Object] ,它传入后台是个String类型,而后台是通过MultipartFile[]来接收这个String类型的 “[object Object]” ,必然会报错。
问题3:数据前台打印都正常,但是传到后台就变成了null,查看请求体变成了undefined
解决办法:看看是不是把raw错写成了row。 哈哈哈哈因为我就是。
有其他问题欢迎各位评论下面留言