SpringBoot2.0实现多图片上传加回显

@RequestMapping ( "/pic" )

@ResponseBody

public ResponseEntity<String> pic(MultipartFile [] pictures) throws Exception {

     ResponseEntity<String> responseEntity = new ResponseEntity<>();

     long count = Arrays.asList(pictures).stream().

             map(MultipartFile::getOriginalFilename).

             filter(String::isEmpty).count();

     if (count == pictures.length){

         responseEntity.setCode(ResponseEntity.ERROR);

         throw new NullOrEmptyException( "图片不能同时为空" );

     }

     responseEntity.setCode(ResponseEntity.OK);

     responseEntity.setMessage( "上传成功" );

     return responseEntity;

}

< div class = "container" >

     < div class = "avatar-upload" >

         < div class = "avatar-edit" >

             < input type = 'file' name = "pictures" id = "imageOne" accept = ".png, .jpg, .jpeg" />

             < label for = "imageOne" ></ label >

         </ div >

         < div class = "avatar-preview" >

             < div id = "imageOnePreview"

                  style = "background-image: url(http://ww3.sinaimg.cn/large/006tNc79ly1g556ca7ovqj30ak09mta2.jpg);" >

             </ div >

         </ div >

     </ div >

</ div >

function readURLOne(input) {

     if (input.files && input.files[0]) {

         var reader = new FileReader();

         reader.onload = function (e) {

             $( '#imageOnePreview' ).css( 'background-image' , 'url(' +e.target.result + ')' );

             $( '#imageOnePreview' ).hide();

             $( '#imageOnePreview' ).fadeIn(650);

         }

         reader.readAsDataURL(input.files[0]);

     }

}

$( "#imageOne" ).change( function () {

     readURLOne( this );

});

function getUpload(){

     //获取form表单中所有属性  key为name值

     var formData = new FormData($( "#picForm" )[0]);

     $.ajax({

         url: '/pic' ,

         type: 'POST' ,

         dataType: "json" ,

         data: formData,

         processData: false ,

         contentType: false ,

         success:( function (data) {

             window.confirm(data.message);

             window.location.reload();

         }),

         error:( function (res) {

             alert( "失败" );

         })

     });

}

spring:

   servlet:

     multipart:

       enabled: true

       max-file-size: 20MB

       max-request-size: 20MB

spring.servlet.multipart.enabled=true # 是否支持多文件上传

spring.servlet.multipart.file-size-threshold=0B # 文件写入磁盘的阈值

spring.servlet.multipart.location= # 上传文件的保存地址

spring.servlet.multipart.max-file-size=1MB # 上传文件的最大值

spring.servlet.multipart.max-request-size=10MB # 请求的最大值

spring.servlet.multipart.resolve-lazily=false # 是否在文件或参数访问时延迟解析多部分请求

@ControllerAdvice

@Slf4j

public class CommonExceptionHandler extends ResponseEntityExceptionHandler {

     @ExceptionHandler (NullOrEmptyException. class )

     @ResponseBody

     public ResponseEntity<String> nullOrEmptyExceptionHandler(HttpServletRequest request, NullOrEmptyException exception){

         log.info( "nullOrEmptyExceptionHandler" );

         return handleErrorInfo(request, exception.getMessage());

     }

     @ExceptionHandler (value = Exception. class )

     @ResponseBody

     public ResponseEntity<String> defaultErrorHandler(HttpServletRequest request, Exception exception){

         log.info( "defaultErrorHandler" );

         return handleErrorInfo(request, exception.getMessage());

     }

     private ResponseEntity<String> handleErrorInfo(HttpServletRequest request, String message) {

         ResponseEntity<String> responseEntity = new ResponseEntity<>();

         responseEntity.setMessage(message);

         responseEntity.setCode(ResponseEntity.ERROR);

         responseEntity.setData(message);

         responseEntity.setUrl(request.getRequestURL().toString());

         return responseEntity;

     }

}