欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Spring Boot 利用WebUploader进行文件上传功能

程序员文章站 2023-08-19 16:37:59
web uploader简介 webuploader是由baidu webfe(fex)团队开发的一个简单的以html5为主,flash为辅的现代文件上传组件。在现代的浏...

web uploader简介

webuploader是由baidu webfe(fex)团队开发的一个简单的以html5为主,flash为辅的现代文件上传组件。在现代的浏览器里面能充分发挥html5的优势,同时又不摒弃主流ie浏览器,沿用原来的flash运行时,兼容ie6+,ios 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。

我们这里使用官网的一个例子来实现我们个人头像的上传。

我们的重点是在spring boot项目中利用webuploader如何进行文件上传,所以直接实现一个简单的功能,仅供参考。

下面是一个从官网下载来的示例:带剪裁的图片上传功能。

Spring Boot 利用WebUploader进行文件上传功能

我们利用示例来改造项目中的个人头像上传。

效果看起来是这样的:

Spring Boot 利用WebUploader进行文件上传功能

Spring Boot 利用WebUploader进行文件上传功能

首先我们来改造我们的webuploader示例代码。

以下都是我项目中的部分代码:

(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('\n'));
          // }
        });
        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进行文件上传功能,希望对大家有所帮助