Spring Boot 는 WebUploader 를 이용 하여 파일 업로드 기능 을 수행 합 니 다.

웹 업 로 더 안내
WebUploader 는 Baidu WebFE(FEX)팀 이 개발 한 간단 한 HTML 5 위주,FLASH 를 보조 로 하 는 현대 파일 업로드 구성 요소 입 니 다.현대 의 브 라 우 저 에서 HTML 5 의 장점 을 충분히 발휘 할 수 있 을 뿐만 아니 라 주류 IE 브 라 우 저 를 버 리 지 않 고 원래 의 FLASH 가 실 행 될 때 IE6+,iOS 6+,android 4+를 호 환 할 수 있다.두 세트 가 실 행 될 때 같은 호출 방식 은 사용자 가 임의로 선택 할 수 있다.큰 파일 을 나 누 어 동시 업로드 하여 파일 업로드 효율 을 크게 향상 시 켰 다.
우 리 는 홈 페이지 의 예 를 들 어 개인 프로필 사진 을 올 리 는 것 을 실현 한다.
Spring Boot 프로젝트 에서 웹 Uploader 를 이용 하여 파일 을 어떻게 업로드 하 는 지 에 중점 을 두 고 있 기 때문에 간단 한 기능 을 직접 실현 하 는 것 입 니 다.참고 하 시기 바 랍 니 다.
다음은 홈 페이지 에서 다운로드 한 예제 입 니 다.가위질 이 있 는 사진 업로드 기능 입 니 다.

우 리 는 예 시 를 이용 하여 프로젝트 중의 개인 프로필 사진 을 개조 하여 올 렸 다.
효과 가 이렇게 보 입 니 다.


우선 웹 Uploader 예제 코드 를 개조 하 겠 습 니 다.
다음은 모두 제 프로젝트 의 일부 코드 입 니 다.

(function( factory ) {
  if ( !window.jQuery ) {
    alert('jQuery is required.')
  }
  jQuery(function() {
    factory.call( null, jQuery );
  });
})
(function( $ ) {
// -----------------------------------------------------
// ------------ START ----------------------------------
// -----------------------------------------------------
// ---------------------------------
// --------- Uploader -------------
// ---------------------------------
  var Uploader = (function() {
    // -------setting-------
    //         ,           Croper UI   ,           crop.
    var FRAME_WIDTH = 1600;
    var _ = WebUploader;
    var Uploader = _.Uploader;
    var uploaderContainer = $('.uploader-container');
    var uploader, file;
    if ( !Uploader.support() ) {
      alert( 'Web Uploader         !');
      throw new Error( 'WebUploader does not support the browser you are using.' );
    }
    // hook,
    //             。
    Uploader.register({
      'before-send-file': 'cropImage'
    }, {
      cropImage: function( file ) {
        var data = file._cropData,
          image, deferred;
        file = this.request( 'get-file', file );
        deferred = _.Deferred();
        image = new _.Lib.Image();
        deferred.always(function() {
          image.destroy();
          image = null;
        });
        image.once( 'error', deferred.reject );
        image.once( 'load', function() {
          image.crop( data.x, data.y, data.width, data.height, data.scale );
        });
        image.once( 'complete', function() {
          var blob, size;
          //     UC / qq          
          // ctx.getImageData           Exception
          // INDEX_SIZE_ERR: DOM Exception 1
          try {
            blob = image.getAsBlob();
            size = file.size;
            file.source = blob;
            file.size = blob.size;
            file.trigger( 'resize', blob.size, size );
            deferred.resolve();
          } catch ( e ) {
            console.log( e );
            //        ,        
            deferred.resolve();
          }
        });
        file._info && image.info( file._info );
        file._meta && image.meta( file._meta );
        image.loadFromBlob( file.source );
        return deferred.promise();
      }
    });
    return {
      init: function( selectCb ) {
        uploader = new Uploader({
          pick: {
            id: '#filePicker',
            multiple: false
          },
          //              。
          thumb: {
            quality: 70,
            //      
            allowMagnify: false,
            //         。              。
            crop: false
          },
          //       ,      。
          chunked: false,
          //          ,       。
          compress: false,
          // fileSingleSizeLimit: 2 * 1024 * 1024,
          server: 'StudentImgFileUpload',
          swf: $.trim($("#BASE_URL").val()) + '/static/webuploader/Uploader.swf',
          fileNumLimit: 1,
          //          。
          accept: {
            title: 'Images',
            // extensions: 'gif,jpg,jpeg,bmp,png',
            // mimeTypes: 'image/*'
            extensions: 'jpg,jpeg,png',
            //  WebUploader chrome                        
            mimeTypes: 'image/jpg,image/jpeg,image/png'  //    
          }
          //formData: {"Authorization": localStorage.token}, //      ,    
          // chunked: true, //  
          // chunkSize: 10 * 1024 * 1024, //      
          // threads:1, //    
          // disableGlobalDnd: true //    
          // onError: function() {
          //   var args = [].slice.call(arguments, 0);
          //   alert(args.join('
')); // } }); uploader.on('fileQueued', function( _file ) { file = _file; uploader.makeThumb( file, function( error, src ) { if ( error ) { alert(' '); return; } selectCb( src ); }, FRAME_WIDTH, 1 ); // height 1, 100% 。 }); /** * */ uploader.on("error", function (type) { if (type == "Q_TYPE_DENIED") { showInfo(" JPG、JEPG、PNG、 "); } }); // , item class, 。 uploader.on( 'uploadSuccess', function( file ) { showInfo(" "); }); // , 。 uploader.on( 'uploadError', function( file ) { showInfo(" "); }); }, crop: function( data ) { var scale = Croper.getImageSize().width / file._info.width; data.scale = scale; file._cropData = { x: data.x1, y: data.y1, width: data.width, height: data.height, scale: data.scale }; }, upload: function() { uploader.upload(); } } })(); // --------------------------------- // --------- Crpper --------------- // --------------------------------- var Croper = (function() { var container = $('.cropper-wraper'); var $image = container.find('.img-container img'); var btn = $('.upload-btn'); var isBase64Supported, callback; $image.cropper({ aspectRatio: 4 / 4, preview: ".img-preview", done: function(data) { // console.log(data); } }); function srcWrap( src, cb ) { // we need to check this at the first time. if (typeof isBase64Supported === 'undefined') { (function() { var data = new Image(); var support = true; data.onload = data.onerror = function() { if( this.width != 1 || this.height != 1 ) { support = false; } } data.src = src; isBase64Supported = support; })(); } if ( isBase64Supported ) { cb( src ); } else { // otherwise we need server support. // convert base64 to a file. // $.ajax('', { // method: 'POST', // data: src, // dataType:'json' // }).done(function( response ) { // if (response.result) { // cb( response.result ); // } else { // alert(" "); // } // }); } } btn.on('click', function() { callback && callback($image.cropper("getData")); return false; }); return { setSource: function( src ) { // base64 。 // ie6-ie8 srcWrap( src, function( src ) { $image.cropper("setImgSrc", src); }); container.removeClass('webuploader-element-invisible'); return this; }, getImageSize: function() { var img = $image.get(0); return { width: img.naturalWidth, height: img.naturalHeight } }, setCallback: function( cb ) { callback = cb; return this; }, disable: function() { $image.cropper("disable"); return this; }, enable: function() { $image.cropper("enable"); return this; } } })(); // ------------------------------ // -----------logic-------------- // ------------------------------ var container = $('.uploader-container'); Uploader.init(function( src ) { Croper.setSource( src ); // 。 container.addClass('webuploader-element-invisible'); // , 。 Croper.setCallback(function( data ) { Uploader.crop(data); Uploader.upload(); }); }); // ----------------------------------------------------- // ------------ END ------------------------------------ // ----------------------------------------------------- });
그리고 페이지 의 일부 코드:
다음은 Controller 부분의 코드 입 니 다.

 @RequestMapping(value="/student/StudentImgFileUpload", method=RequestMethod.POST)
  @ResponseBody
  String studentImgFileUpload(@RequestParam MultipartFile file, HttpServletRequest request){
    logger.info("      ....")
    //     
    String originalFilename = file.getOriginalFilename()
    logger.info("     :" + originalFilename)
    String realPath = request.getServletContext().getRealPath("/public/student/")
    String uploadFileName = System.currentTimeMillis()+"_"+ originalFilename
    logger.info("      :" + realPath + ",         :" + uploadFileName)
    boolean flag = true

    //    
    RandomAccessFile raFile = null
    BufferedInputStream inputStream = null
    try{
      File dirFile = new File(realPath, uploadFileName)
      //            
      raFile = new RandomAccessFile(dirFile, "rw")
      raFile.seek(raFile.length())
      inputStream = new BufferedInputStream(file.getInputStream())
      byte[] buf = new byte[1024]
      int length = 0
      while ((length = inputStream.read(buf)) != -1) {
        raFile.write(buf, 0, length)
      }
    }catch(Exception e){
      flag = false
      logger.info("    :" + e.getMessage())
      throw new IOException(e.getMessage())
    }finally{
      try {
        if (inputStream != null) {
          inputStream.close()
        }
        if (raFile != null) {
          raFile.close()
        }
      }catch(Exception e){
        flag = false
        logger.info("    :" + e.getMessage())
        throw new IOException(e.getMessage())
      }
    }
  }
이렇게 하면 Spring Boot 프로젝트 에서 WebUploader 를 사용 하여 파일 업 로드 를 하 는 기능 을 간단하게 실현 할 수 있다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Spring Boot 가 WebUploader 를 이용 하여 파일 업로드 기능 을 하 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기