Spring Boot实现上传图片

1 篇文章 0 订阅
1 篇文章 0 订阅
<form id="gameEventForm" lay-filter="gameEventForm"
	class="layui-form model-form">
	<input name="eventId" value="${gameEvent.eventId}" style="display: none;" />
	<div class="layui-form-item">
		<label class="layui-form-label">活动名称<span style="color: red;">*</span></label>
		<div class="layui-input-block">
			<input name="eventName" placeholder="活动名称" value="${gameEvent.eventName}"
				type="text" class="layui-input" lay-verify="required" required />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">活动图片</label>
		<div class="layui-input-block">
			<button type="button" class="layui-btn" id="file">
				<i class="layui-icon">&#xe67c;</i>上传图片
			</button>
			<br><br>
			<span>
				<img id="eventImgPath" src="${gameEvent.eventImgPath}" width="120" height="120" />
			</span>
			<input name="eventImgPath" value="${gameEvent.eventImgPath}" style="display: none;" />
			
		</div>
	</div>
	
	 <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="btnSubmit" lay-submit>保存</button>
    </div>
	
</form>
	// 执行实例
	var uploadInst = upload.render({
		elem : '#file' // 绑定元素
		,
		url : '/game_event_mgr/upload' // 上传接口
		,
		data :{
			eventId : function() {
				return $("input[name='eventId']").val();
			}
		},
		before : function(obj) {
			// 预览本地文件示例
			obj.preview(function(index, file, result) {
				$('#eventImgPath').attr('src', result);
			});
		},
		field : "file",
		done : function(res) {
			// 上传完毕回调
			var imgPath = res.data;
			$("input[name='eventImgPath']").val(imgPath);
		},
		error : function() {
		}
	});
    /**
     * 上传图片
     * 
     * @param file
     * @return
     */
    @ResponseBody
    @RequestMapping("/upload")
    public Object upload(MultipartFile file, Integer eventId, HttpServletRequest request) {
        String pictureName = UUID.randomUUID().toString() + "." + ToolUtil.getFileSuffix(file.getOriginalFilename());
        File saveFile;
        try {

            System.out.println(FileUtil.getPath() + EVENTPATH + pictureName);

            saveFile = new File(FileUtil.getPath() + EVENTPATH + pictureName);
            System.out.println("upload file path : " + saveFile.getAbsolutePath());
            file.transferTo(saveFile.getAbsoluteFile());
        } catch (Exception e) {
            throw new ServiceException(BizExceptionEnum.UPLOAD_ERROR);
        }
        return ResponseData.success(pictureName);
    }

图片回显

    /**
     * 修改活动
     * 
     * @param gameEvent
     * @param model
     * @return
     */
    @RequestMapping("/update_event")
    @ResponseBody
    public ResponseData updateEvent(@RequestParam("eventId") Integer eventId, String eventName, String eventImgPath,
            Boolean isStart) {
        GameEvent gameEvent = gameEventService.selectById(eventId);
        if (eventName != null) {
            gameEvent.setEventName(eventName);
        }
        if (eventImgPath != null) {
            gameEvent.setEventImgPath(eventImgPath);
        }
        if (isStart != null) {
            gameEvent.setStart(isStart);
        }
        gameEventService.updateEvent(gameEvent);
        return SUCCESS_TIP;
    }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值