Java实现图片上传功能（前后端：vue+springBoot）

admin管理员组

文章数量:1794759

Java实现图片上传功能（前后端：vue+springBoot）

Java实现图片上传功能（前后端：vue+springBoot）

• 前言：
• 前端：
• • 组件引入
  • 基础文件上传
  • 自定义上传方法
• 后端：
• • 需要引入的jar包：
  • 基础文件上传
  • • Controller层：
    • server层：
  • 自定义的多参数接口

前言：

我们在设计自己的网站的时候，一定会遇到上传图片的功能，比如：用户头像，商品图片。 这篇文章将带着大家设计一个可以使用的图片上传功能，请大家一步一步来，让我们在码路上越走越远。

前端： 组件引入

前端我们使用element-ui的组件。我这里以html加js的方式 1：引入vue.js，axios.js，element-ui。

<script src="../static/js/util/vue.min.js"></script> <script src="cdn.staticfile/axios/0.18.0/axios.min.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="unpkg/element-ui/lib/index.js"></script> 基础文件上传

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) { this.imageUrl = URL.createObjectURL(file.raw); }, beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; } } } </script>

上面是element-ui中的一个例子。我将会对其中的各个参数进行讲解。 其中的样式，我们不进行讲解，直接复制就可以。 el-upload中的参数： action：后面是接口url,图片文件将会发送到该接口中。 :show-file-list：是否显示上传的图片列表 :on-success：上传成功后要执行的操作，“：”代表与js代码进行了绑定。 :before-upload：上传之前要执行的操作，比如检验是否是图片文件，图片的大小是否符合要求等。

在它的一个函数中使用了URL.createObjectURL(file.raw);方法，这个地方要注意：elementUI中，自带的方法中的file，并不是指图片本身，而是他的一个dom。如果要是拿他的图片，就要用file.raw。

自定义上传方法

通过上面的方式就可以将图片文件发送给后端，但是，这个只是基础的功能，往往我们的业务不会如此简单，比如：我们可能将商品id,等信一同发送后端，以保证后端确定图片的作用。此时上面的方式就满足不了我们的需求了。 为此我们需要设计自己的上传方法。于是改造过程： 1：action后面的路径改为空：action=“” 2：添加属性:http-request，后面跟自定义的方法名，例如：:http-request=“uploader” 3：在js中书写自定义方法“uploader”

async uploader(params){ let file = params.file; let clothesId; let styleId; let imgUrl; clothesId = this.goodsModify.goodsId; styleId = this.goodsModify.styleId; imgUrl = this.goodsModify.goodsImg formData = new FormData(); formData.append('file', file); formData.append('clothesId',clothesId); formData.append('styleId',styleId); formData.append('imgUrl',imgUrl); let data = await axios.post("/Manage/upBusinessImage",formData) },

说明一下如果要传递的是多个参数，则必须把多个参数整理成formData的形式进行发送。而到后端则需要用@RequestParam注解标识进行接收。

后端： 需要引入的jar包： <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.11.0</version> </dependency> 基础文件上传 Controller层： @RequestMapping(value = "/Manage/upBusinessImage",method = RequestMethod.POST) public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file) { return fileService.uploadImage(file,"D:/img/HeadImages/"); }

因为只传递了文件，所以只需要一个MultipartFile类型的file接收就可以了。

server层： //上传操作 private CommonResultVo uploadImage(MultipartFile file,String folder){ if (file == null) { return CommonResultVoUtil.error("请选择要上传的图片"); } if (file.getSize() > 1024 * 1024 * 10) { return CommonResultVoUtil.error("文件大小不能大于10M"); } //获取文件后缀 String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1, file.getOriginalFilename().length()); if (!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())) { return CommonResultVoUtil.error("请选择jpg,jpeg,gif,png格式的图片"); } String savePath = folder; File savePathFile = new File(savePath); if (!savePathFile.exists()) { //若不存在该目录，则创建目录 savePathFile.mkdir(); } //通过UUID生成唯一文件名 String filename = UUID.randomUUID().toString().replaceAll("-","") + "." + suffix; try { //将文件保存指定目录 //file.transferTo(new File(savePath + filename)); //File file1 = new File(file.getOriginalFilename()); FileUtils.copyInputStreamToFile(file.getInputStream(),new File(savePath + filename)); } catch (Exception e) { e.printStackTrace(); return CommonResultVoUtil.error("保存文件异常"); } //返回文件名称 return CommonResultVoUtil.successWithData(filename,1); }

代码里的CommonResultVoUtil是我自定义的结果工具类，大家可以根据自己的需求自己构建，也可直接返回字符串成功或者失败。

自定义的多参数接口

与上面的区别只是多使用了几个参数：

@RequestMapping(value = "/Manage/upBusinessImage",method = RequestMethod.POST) 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 fileService.uploadBusinessImage(file,clothesId,styleId,imgUrl); }

拿到这些参数后可以根据某些参数去定位数据库中的某条记录，然后将图片位置保存入数据库中，以便后续访问。

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

本文标签： 图片上传后端功能javaVue