SpringBoot+layui上傳圖片(圖片流)的方式傳到數據庫

這中方式是能夠選擇多組圖片進行上傳,並且是異步的形式,雖然選擇的多個圖片,但是卻是一個圖片一個圖片存的,所以後臺方法中寫的是存一個圖片的方法

HTML

 <div class="form-group" th:if="${uemiReport ==null || uemiReport.photo==null}">
            <input type="hidden" name="photo" class="multiple_show_img" value="">
            <div class="layui-upload">
                <div class="col-md-2 col-sm-2 col-xs-2" style="text-align: right;">
                    <button type="button" class="layui-btn" id="multiple_img_upload">報告上傳</button>
                </div>
                <div class="col-md-10 col-sm-10 col-xs-10">
                    <blockquote class="layui-elem-quote layui-quote-nm">
                        <div class="layui-upload-list" id="div-slide_show"></div>
                    </blockquote>
                </div>
            </div>
        </div>

 

JS

upPhoto:function () {
			var me=this;
			 var id=$("#reportId").val();
			var multiple_images = [];
			layui.use('upload', function () {
				var upload = layui.upload;
				upload.render({
					elem: '#multiple_img_upload'
					,url: __ctx+'/platform/data/uemiReport/upPhoto?id='+id
					,multiple: true
					,before: function(obj){
						//預讀本地文件示例,不支持ie8
						obj.preview(function(index, file, result){
							$('#div-slide_show').append('<img width="100" height="100" src="'+ result +'" alt="'+ file.name
								+'" title="點擊刪除" class="layui-upload-img" οndblclick="upPhoto.delPhoto(this)">')
						});
					}
					,done: function(res){
						//如果上傳成功
						if (res.result==1) {
							//追加圖片成功追加文件名至圖片容器
							multiple_images.push(res.cause);
							$('.multiple_show_img').val(multiple_images);
						}else {
							//提示信息
							DialogUtil.alert(res.message);
						}
					}
				});

			});
		},

Controller

@RequestMapping("upPhoto")
	public void upPhoto(MultipartHttpServletRequest request, HttpServletResponse response) throws Exception {
		ResultMessage message=null;
		try{
			Long reportId = RequestUtil.getLong(request, "id");
			MultipartFile file = request.getFile("file");
			upPhotoService.savePhoto(file,reportId);
			String fileName = file.getOriginalFilename();
			File dest = new File(photoPath + fileName);
			file.transferTo(dest);
			message=new ResultMessage(ResultMessage.Success, "上傳成功");
			message.setCause(photoPath + fileName);
		}catch(Exception e){
			logger.debug(e.getMessage());
			message=new ResultMessage(ResultMessage.Fail, "上傳失敗",e.getMessage());
		}
		writeResultMessage(response.getWriter(), message);
	}

service:

 @Override
	public void savePhoto(MultipartFile file,Long reportId) throws Exception {
		try{
			String fileName = file.getOriginalFilename();
			byte[] bytes = file.getBytes();
			UpPhoto upPhoto = new UpPhoto();
			//得到文件名
			upPhoto.setFileName(fileName.split("\\.")[0]);
			long photoId = UniqueIdUtil.genId();
			upPhoto.setId(photoId);
			//得到文件類型
			upPhoto.setFormat(fileName.split("\\.")[1]);
			//存入圖片流
			upPhoto.setFileStream(bytes);
			add(upPhoto);

			ReportPhotoRel reportPhotoRel = new ReportPhotoRel();
			reportPhotoRel.setId(UniqueIdUtil.genId());
			reportPhotoRel.setPhotoId(photoId);
			reportPhotoRel.setReportId(reportId);
			reportPhotoRelService.add(reportPhotoRel);
		}catch(Exception e){
			logger.debug(e.getMessage());
		}
	}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章