Java实现图片上传功能（前后端：vue+springBoot）
- 前言：
- 前端：
-
- 组件引入
- 基础文件上传
- 自定义上传方法
- 后端：
-
- 需要引入的jar包：
- 基础文件上传
-
- Controller层：
- server层：
- 自定义的多参数接口
前言：
我们在设计自己的网站的时候，一定会遇到上传图片的功能，比如：用户头像，商品图片。
这篇文章将带着大家设计一个可以使用的图片上传功能，请大家一步一步来，让我们在码路上越走越远。
前端：
组件引入
前端我们使用element-ui的组件。我这里以html加js的方式
1：引入，，element-ui。
<script src="../static/js/util/"></script>
<script src="/axios/0.18.0/"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="/element-ui/lib/theme-chalk/">
<!-- 引入组件库 -->
<script src="/element-ui/lib/"></script>
- 1
- 2
- 3
- 4
- 5
- 6
基础文件上传
2：element-ui中有多个例子，我们使用其中一个：
<el-upload
class="avatar-uploader"
action="/Manage/upBusinessImage"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleAvatarSuccess(res, file) {
= ();
},
beforeAvatarUpload(file) {
const isJPG = === 'image/jpeg';
const isLt2M = / 1024 / 1024 < 2;
if (!isJPG) {
this.$('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
上面是element-ui中的一个例子。我将会对其中的各个参数进行讲解。
其中的样式，我们不进行讲解，直接复制就可以。
el-upload中的参数：
action：后面是接口url,图片文件将会发送到该接口中。
:show-file-list：是否显示上传的图片列表
:on-success：上传成功后要执行的操作，“：”代表与js代码进行了绑定。
:before-upload：上传之前要执行的操作，比如检验是否是图片文件，图片的大小是否符合要求等。
在它的一个函数中使用了URL.createObjectURL();方法，这个地方要注意：elementUI中，自带的方法中的file，并不是指图片本身，而是他的一个dom。如果要是拿他的图片，就要用。
自定义上传方法
通过上面的方式就可以将图片文件发送给后端，但是，这个只是基础的功能，往往我们的业务不会如此简单，比如：我们可能将商品id,等信息一同发送后端，以保证后端确定图片的作用。此时上面的方式就满足不了我们的需求了。
为此我们需要设计自己的上传方法。于是改造过程：
1：action后面的路径改为空：action=“”
2：添加属性:http-request，后面跟自定义的方法名，例如：:http-request=“uploader”
3：在js中书写自定义方法“uploader”
async uploader(params){
let file = ;
let clothesId;
let styleId;
let imgUrl;
clothesId = ;
styleId = ;
imgUrl =
formData = new FormData();
('file', file);
('clothesId',clothesId);
('styleId',styleId);
('imgUrl',imgUrl);
let data = await ("/Manage/upBusinessImage",formData)
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
说明一下如果要传递的是多个参数，则必须把多个参数整理成formData的形式进行发送。而到后端则需要用@RequestParam注解标识进行接收。
后端：
需要引入的jar包：
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.11.0</version>
</dependency>
- 1
- 2
- 3
- 4
- 5
基础文件上传
Controller层：
@RequestMapping(value = "/Manage/upBusinessImage",method = )
public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file) {
return (file,"D:/img/HeadImages/");
}
- 1
- 2
- 3
- 4
因为只传递了文件，所以只需要一个MultipartFile类型的file接收就可以了。
server层：
//上传操作
private CommonResultVo uploadImage(MultipartFile file,String folder){
if (file == null) {
return ("请选择要上传的图片");
}
if (() > 1024 * 1024 * 10) {
return ("文件大小不能大于10M");
}
//获取文件后缀
String suffix = ().substring(().lastIndexOf(".") + 1, ().length());
if (!"jpg,jpeg,gif,png".toUpperCase().contains(())) {
return ("请选择jpg,jpeg,gif,png格式的图片");
}
String savePath = folder;
File savePathFile = new File(savePath);
if (!()) {
//若不存在该目录，则创建目录
();
}
//通过UUID生成唯一文件名
String filename = ().toString().replaceAll("-","") + "." + suffix;
try {
//将文件保存指定目录
//(new File(savePath + filename));
//File file1 = new File(());
((),new File(savePath + filename));
} catch (Exception e) {
();
return ("保存文件异常");
}
//返回文件名称
return (filename,1);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
代码里的CommonResultVoUtil是我自定义的结果工具类，大家可以根据自己的需求自己构建，也可直接返回字符串成功或者失败。
自定义的多参数接口
与上面的区别只是多使用了几个参数：
@RequestMapping(value = "/Manage/upBusinessImage",method = )
public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file,
@RequestParam(value = "clothesId", required = false) String clothesId,
@RequestParam(value = "styleId", required = false) String styleId,
@RequestParam(value = "imgUrl", required = false) String imgUrl) {
return (file,clothesId,styleId,imgUrl);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
拿到这些参数后可以根据某些参数去定位数据库中的某条记录，然后将图片位置保存入数据库中，以便后续访问。