本案例使用springboot1.5版本进行总结，实际跟框架版本关系不大；

关于页面：

    
     
          
          
          
          
      
    
 主要是一些标签的使用 合理的展示； 关于js脚本：

var uploadImage = {
          constant: {
              uploadUrl: CUR_PATH + "/img/imgUpload", //图片上传             imgSrcUrl: CUR_PATH + "/img/resImage?path=", //获取图片             imgDefUrl: CUR_PATH + "/webapp/common/img/noimg.png",  //默认图片路径             imgEmptyUrl: "/webapp/common/img/noimg.png"         },         valid: function(file){
             if(file.size > (3 * 1024 * 1024)){
                 u.alert("图片大小不能超过3M");                return false;            }            var suffix = file.name.substr(file.name.lastIndexOf('.')+1).toLowerCase();            if(suffix!='png'&&suffix!='gif'                &&suffix!='jpg'&&suffix!='jpeg'){
                 u.alert("上传文件不是常用图片后缀(png,gif,jpg,jpeg),请确认");                return false;            }            return true;         },         upload:function(imgId ,file){
              var imageForm = new FormData();             imageForm.append('fileName', file);             $.ajax({
                  type: 'POST',                 url: uploadImage.constant.uploadUrl,                 data: imageForm,                 async: false,                 processData: false,  // 告诉jQuery不要去处理发送的数据                 contentType: false,   // 告诉jQuery不要去设置Content-Type请求头                 success: function (data) {
                      if(data.code == 1){
                          var imgSrc = uploadImage.constant.imgSrcUrl + data.re;                         $("#"+imgId+"Url").val(data.re);                         $("#"+imgId).attr("src",imgSrc);                         // u.alert("上传成功");                     }else{
                          u.alert("上传失败");                     }                 }             });         },         selectImage: function (idBtn) {
              $("#imgFileBtn").attr("alt", idBtn);             $("#imgFileBtn").click();         },         changeFile:function(event){
               var file = event.files[0];              var imgId = event.alt;              if(uploadImage.valid(file)){
                   uploadImage.upload(imgId, file);              }             $("#imgFileBtn").val('');         },         getImageJsonArray:function(imgName){
              var imgArray =  [];             if($("img[name=\'"+imgName+"\']").length <= 1){
                  if($('#'+imgName+'Url').val()!=''                     && $('#'+imgName+'Url').val() != uploadImage.constant.imgEmptyUrl){
                  }                 imgArray.push(getImgJsonObject(imgName));             }else{
                  $("img[name=\'"+imgName+"\']").each(function(index,obj){
                      imgArray.push(getImgJsonObject(imgName + (index+1)));                 });             }             return imgArray;         },         clearImg: function(imgName){
              $("img[name=\'"+imgName+"\']").each(function(index,obj){
                  $('#'+imgName+(index+1)+'Url').val('');                 obj.src = uploadImage.constant.imgDefUrl;             });         }     }; /**  * 组装json对象  * @param imgName  * @returns {
  {id: (*|jQuery), bussId: *, ucpCarId: Document.ucpCarId,  * attachmentType: (*|jQuery), number: (*|jQuery), url: (*|jQuery)}}  */ function getImgJsonObject(imgName){
      var jsonRow = {
          attachmentType: $('#'+imgName+'Type').val(),         url: $('#'+imgName+'Url').val()     };     return jsonRow; } 主要涉及upload路径，页面展示控制，json串的拼接 送到后台操作，图片大小限制等，

var handleImgUrl = function(){
      //handle img url     var registImgArray = [];     var registImg2Array = [];     var img = [];     if ( $("#status").val() == noHandleFlag) {
          registImgArray = uploadImage.getImageJsonArray('registImg');         img = img.concat(registImgArray);     } else if ($("#status").val() == handledFlag) {
          registImgArray = uploadImage.getImageJsonArray('registImg');         registImg2Array = uploadImage.getImageJsonArray('registImg2');         img = img.concat(registImgArray, registImg2Array);     } else {
          u.alert("处理状态不能为空");         return;     }     var jsonStr = JSON.stringify(img);     $("#imgJsonStr").val(jsonStr); }; 最后就是后台java处理了：

@Slf4j @Controller @RequestMapping("img/") public class ImgController {
      /**      * @Description: 流的方式响应页面路      * @Date: 2018/9/20 上午9:35      */     @ResponseBody     @RequestMapping("resImage")     public void resImageFromStream(String path,HttpServletResponse response) {
          if (StringUtils.isNotEmpty(path)){
              List
    
      names = new ArrayList<>();             names.add(path);             List
     
       fileNames = FileUtil.getStreamFromPdfs(names);             CommonUtils.setContentType(response,path);             try {
                  OutputStream output = response.getOutputStream();                 output.write(fileNames.get(0));                 output.flush();                 response.flushBuffer();                 output.close();             }catch (IOException e){
                  log.error("展示图片异常：{}",e);             }         }     }     @RequestMapping("imgUpload")     @ResponseBody     public Res imgUpload(@RequestParam(value = "fileName") MultipartFile multipartFile){
          String imgName = FileUtil.pdfsUploadFile(multipartFile);         return Res.suc(imgName);     }
     
    

　　//util function

public static String pdfsUploadFile(MultipartFile file){
      //准备二进制数据     byte[] bytes;     String storeName = StringUtils.EMPTY;     try {
          bytes = file.getBytes();         //获取原文件名         String fileName = file.getOriginalFilename();         //文件后缀包括"."         String suffixName = fileName.substring(fileName.lastIndexOf("."));         //新文件名         String newFileName = UUID.randomUUID().toString() + suffixName;         //准备pdfs业务vo         PDFSUploadVO vo = new PDFSUploadVO();         vo.setName(newFileName);//设置存储图片名         vo.setData(bytes);//设置图片的二进制数据         PDFSUploadResultVO res = PDFSClient.upload(vo);//调用PDFSClient完成上传         storeName=res.getNames().get("ORIGINAL");//返回给调用端的文件名       }catch (IOException e){
          e.printStackTrace();         log.error("图片上传到pdfs时异常");       }     return storeName; }

}

其中图片路径存储的方法不再多写，主要根据业务模式 可以一对一的存储，也可一对多个字段 达到一对一的图片存储数据效果； 人生苦短，学会看淡一些条条框框、享受一些让自己心情愉悦的事情、莫使金樽空对月；