下面是用springboot实现的一个简单文件上传例子
1.文件上传是使用@RequestPart注解,和MultipartFile类来接受,MultipartFile类中有很多属性供我们使用。话不多说先创建一个Controller
/**
* @Author zxm
* @Date 2022/01/07 10:24
*/
@Controller
@RequestMapping("/count")
public class ContextController {
/*上传文件的接口*/
@PostMapping("/uplode")
@ResponseBody
public String getUplode(@RequestPart("one") MultipartFile mf,
@RequestPart("any") MultipartFile[] mfs) throws IOException {
System.out.println("单文件上传信息为:"+mf.getOriginalFilename());
System.out.println("多文件个数:"+mfs.length);
for (MultipartFile m:mfs){
System.out.println("多文件信息:文件名称:"+m.getOriginalFilename()+",文件大小:"+m.getSize()/1000+"kb");
}
/*将文件上传到指定文件夹*/
if (!mf.isEmpty()){
String fileName=mf.getOriginalFilename();
//文件上传
mf.transferTo(new File("E:\\"+fileName));
}
if (mfs.length>0){
for (MultipartFile m: mfs) {
m.transferTo(new File("E:\\"+m.getOriginalFilename()));
}
}
return "成功";
}
}
2.然后创建一个前端代码测试,如果需要多文件的话,给input标签添加multiple属性就表示这是个多文件的input。然后在from里面加enctype=“multipart/form-data” 表示这个请求有多文件请求。
<!--
多文件请求:enctype="multipart/form-data"
多文件:multiple
-->
<form action="/count/uplode" method="post" enctype="multipart/form-data" >
<input type="file" value="上传单个文件" name="one" ><p>
<input type="file" value="上传多个文件" name="any" multiple><p>
<input type="submit" value="提交" >
</form>
在这里基本上就可以上传文件了,但是相信有很多同学在这会一直报错,这是因为上传的文件太大或者文件太多导致的,遇到这样的请款只需要到配置文件里面加入相应的配置即可。
用elementui:
<el-col :span="24">
<el-form-item label="相关附件" prop="files">
<el-upload class="upload-demo" ref="upload" action="/api/blade-examine/upload" :multiple="true" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
</el-button>
<div slot="tip" class="el-upload__tip">选择确认好后再上传</div>
</el-upload>
</el-form-item>
</el-col>
方法:
submitUpload() {
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},