springboot上传文件

最近在项目中遇到了文件上传的工作，由此记录一下 

效果图预览

后台代码

@RestController
@RequestMapping("/uploadImageManage")
@Api(value = "图片上传", description = "图片上传")
public class UploadImageController {
	@RequestMapping(method = RequestMethod.POST, path = "/uploader")
    @ResponseBody
    public Object uploader(@RequestParam String type,@RequestPart("file") MultipartFile file) throws IllegalStateException, IOException {
		String packageName = "";
		if("1".equals(type)) {
			//商品图片
			packageName = Constants.GOODS_IMG;
		}else if("2".equals(type)) {
			//商品详情图片
			packageName = Constants.GOODS_IMG_DETAIL;
		}else if("3".equals(type)) {
			//banner图片
			packageName = Constants.BANNER;
		}else if ("4".equals(type)) {
			//广告图
			packageName = Constants.ADV_IMG;
		}else if ("5".equals(type)) {
			//微信公众号
			packageName = Constants.WXGZH_IMG;
		}
		  File files=new File(Constants.IMG_PATH + packageName);
          // 创建文件夹
          if (!files.exists()) {
          	files.mkdirs();
          }
		
		//String fileName=file.getOriginalFilename();// 文件原名称
         // 自定义的文件名称
         String trueFileName=String.valueOf(System.currentTimeMillis())+".png";
          // 转存文件到指定的路径
          file.transferTo(new File(Constants.IMG_PATH + packageName + trueFileName));
          String url = packageName + trueFileName;
		 return ResultUtil.succ(url);
	}

页面

主要是要导入layui.css样式和

<div class="form-group col-sm-6">
					<label class="col-sm-4 control-label">商品图片：</label>
					<div class="col-sm-8">
						<!-- <input id="originalImg" type="file" style="width: 180px; height:30px;">-->
							<button class="layui-btn" id="img1" type="button">上传图片</button>
							<div class="layui-upload-list">
								<div class="layui-upload-img" style="position: relative;">
									<img class="layui-upload-img" id="imgMsg1">
									<p class="diyControls"><span class="diyCancel"><i></i></span></p>
								</div>
								
								<p id="demoText"></p>
							</div>
							<input class="layui-hide" name="originalImg" id="originalImg" type="hidden" />
					</div>

					</div>

				
				<div class="form-group col-sm-12">
					<label class="col-sm-2 control-label">商品详情图片：</label>
					<div class="col-sm-10">
						<div class="layui-upload">
							<button class="layui-btn" id="img2" type="button">多图片上传</button>
							<div style="margin-top: 10px;">
								<div class="layui-upload-list" id="imgMsg2"></div>
							</div>
							<input class="layui-hide" name="detailImg" id="detailImg" type="hidden" />
						</div>
					</div>
				</div>

javascript

导入layui.js

//普通图片上传
			var uploadInst = upload.render({
				elem: '#img1',
				url: '/tsadmin/uploadImageManage/uploader?type=1',
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {
						$('#imgMsg1').attr('src', result); //图片链接（base64）
					});
				},
				done: function(res) {
					//上传完毕
					if(res.code === "000") {
						$("#originalImg").val(res.obj);
					} else {
						layer.msg(res.state, {
							icon: 2,
							shift: 6
						});
					}
				},
				error: function() {
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function() {
						uploadInst.upload();
					});
				}
			});

			//多图片上传
			var uploadInst2 = upload.render({
				elem: '#img2',
				url: '/tsadmin/uploadImageManage/uploader?type=2',
				multiple: true,
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {
						var msg = "<div class='layui-upload-img' style='position: relative;'>";
						msg += "<img class='layui-upload-img' src='" + result + "'/>";
						msg += "<p class='diyControls'><span class='diyCancel'><i onclick='removeClick(this)'></i></span></p></div>";
						$('#imgMsg2').append(msg);
					});
				},
				done: function(res) {
					//上传完毕
					if(res.code === "000") {
						var detailImg = [];
						var s = $("#detailImg").val();
						if(s != ''){
							detailImg.push(s);
						}
						detailImg.push(res.obj);
						$("#detailImg").val(detailImg.join(","));
					} else {
						layer.msg(res.state, {
							icon: 2,
							shift: 6
						});
					}
				}
			});

		});