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

WebUploader实现图片上传功能

程序员文章站 2022-03-02 23:39:44
本文实例为大家分享了webuploader实现图片上传的具体代码,供大家参考,具体内容如下描述:springmvc 在jsp页面实现 webuploader插件上传图片, 上传到 oss阿里云存储上。...

本文实例为大家分享了webuploader实现图片上传的具体代码,供大家参考,具体内容如下

描述:springmvc 在jsp页面实现 webuploader插件上传图片, 上传到 oss阿里云存储上。

预览:

WebUploader实现图片上传功能

理解: 前端 webuploader插件(这个得去看官网)调起后台,后台 request 接收文件参数,
重新拼装图片url,oss创建连接上传图片提交图片,最后返回图片绝对url和相对url给前端。

先实现前端:1.定义js 2.定义页面

//导入 webuploader插件js、css 样式
<link rel="stylesheet" type="text/css" href="${ctx}/css/plugins/webuploader/webuploader.css" />
<script type="text/javascript" src="${ctx}/js/plugins/webuploader/webuploader.js"></script>

js定义

//使用webuploader插件做图片上传
function infowebuploaderimg(id, folder, image, imagehidden, queueid, filename){

  // 初始化web uploader
  var uploader = webuploader.create({
    // 选完文件后,是否自动上传。
    auto: true,
    // swf文件路径 下载js 里面有.swf文件
    swf: '/js/plugins/webuploader/uploader.swf',
    // 文件接收服务端。后台控制层
    server: '/common/upload',
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
    pick: id,
    // 只允许选择图片文件。
    accept: {
      title: 'images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimetypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png',
    },
  });
  /**
   * 验证文件格式、数量以及文件大小
   */
  uploader.on("error", function(type) {
    if (type == "q_type_denied") {
      alert("请上传图片格式文件");

    } else if (type == "f_exceed_size") {
      alert("文件大小不能超过8m");
    }
  });

  // 文件上传失败,显示上传出错。
  uploader.on( 'uploaderror', function( file ) {
    alert("上传失败,请重试!");
  });

  // 文件上传成功,给item添加成功class, 用样式标记上传成功。data回调的js 
  uploader.on('uploadsuccess', function(file,data) {
    $(imagehidden).val('/' + data.nname);
    $(image).attr("src", data.src);
    $(image).css("margin-top", "10px");
    $(image).show();
    $(image).removeclass("hide");
  });
}
//jsp页面
<div class="center-block">
        <div class="btn-group col-sm-12">
          <div class="fl">
           <div id="fileinput">选择图片</div>
           <img src=""
           class="wd200 mt10"
           id="image" width="200"/>
        </div>
    <span class="help-block m-b-none">图片大小:510x294</span>
    <input class="form-control" id="imagehidden" name="cover" type="text"/>
    </div>
</div>
 //引用 js初始化插件
  infowebuploaderimg("#fileinput", "spvideoimg", "#image", "input[name=cover]", "singlediv");

java 后台

//上传图片(阿里云) 控制层
@responsebody
  @requestmapping(value = "/upload", method = requestmethod.post)
  public string upload(@requestparam(value = "f", required = false, defaultvalue = "") string f,
             string folder,
             multiparthttpservletrequest request, httpservletresponse response) {
    return commonservice.upload(folder, f, request, response);
  }

//业务处理
 public string upload(string folder, string f, multiparthttpservletrequest request, httpservletresponse response) {
    log.info("commonservice上传图片(腾讯云):newfilename11:" + f);
    jsonobject jsonobject = new jsonobject();
    string result = "";
    try {
      iterator<string> itr = request.getfilenames();
      multipartfile file = null;
      string name = "";
      while (itr.hasnext()) {
        file = request.getfile(itr.next());
        name = file.getoriginalfilename();
        string newfilenamebase = uuid.randomuuid().tostring().replace("-", "");
        string originalfileextension = file.getoriginalfilename().substring(file.getoriginalfilename().lastindexof("."));
        string newfilename = newfilenamebase + originalfileextension;
        if (!stringutils.isblank(f)) {
          if (f.startswith(","))
            f.substring(1);
          newfilename = (f.contains(".") ? f.substring(0, f.lastindexof(".")) : f) + ".jpg";
        }
        newfilename = "img/" + newfilename;
        aliyunossutils.uploadfile(newfilename,propertyutil.getvalue("folder"),file);

        //tentunossutils.uploadimage(file, newfilename);
        /*if (propertyutil.getvalue("pic_url").endswith("/")) {
          jsonobject.put("src", propertyutil.getvalue("pic_url") + newfilename);
        } else {
          jsonobject.put("src", propertyutil.getvalue("pic_url") + "/" + newfilename);
        }*/
        jsonobject.put("src",commonutils.setimagevideourlsign(newfilename));

            jsonobject.put("oname", name);
        jsonobject.put("nname", newfilename);
        //删除暂存在root里的图片
        file tempfile = new file(name);
        if (tempfile != null && tempfile.exists()) {
          tempfile.delete();
        }
      }
    } catch (exception e) {
      log.error("上传图片异常", e);
      jsonobject.put("e", e.getmessage());
    }
    result = jsonobject.tostring();
    return result;
  }

工具类:

/**
   * 文件上传
   * @param filename
   * @param file
*/
  public static void uploadfile(string filename,string folder, multipartfile file) {
   try {
   // endpoint以杭州为例,其它region请按实际情况填写。
     string endpoint = upload_host;
     // 阿里云主账号accesskey拥有所有api的访问权限,风险很高。强烈建议您创建并使用ram账号进行api访问或日常运维
     string accesskeyid = access_key_id;
     string accesskeysecret = access_key_secret;

     // 创建ossclient实例。
     oss ossclient = new ossclientbuilder().build(endpoint, accesskeyid, accesskeysecret);

     // 创建putobjectrequest对象。
     putobjectrequest putobjectrequest = new putobjectrequest(folder, filename, multipartfiletofile(file));

     // 如果需要上传时设置存储类型与访问权限,请参考以下示例代码。
     // objectmetadata metadata = new objectmetadata();
     // metadata.setheader(ossheaders.oss_storage_class, storageclass.standard.tostring());
     // metadata.setobjectacl(cannedaccesscontrollist.private);
     // putobjectrequest.setmetadata(metadata);

     // 上传文件。
     ossclient.putobject(putobjectrequest);

     // 关闭ossclient。
     ossclient.shutdown();
   } catch (exception e) {
      e.printstacktrace();
    }
  }


  public static string setimagevideourlsign(string cover) {
    if (cover.startswith("/")) cover = cover.substring(1);
      string host = propertyutil.getvalue("pic_url");
    if (!host.endswith("/")) host = host + "/";
    if (cover.startswith("http") && cover.contains(host)) {
      cover = host + cover + "?" + tentunossutils.getsigne(cover.replace(host, ""));
    } else if (!cover.startswith("http")) {
      cover = host + cover + "?" + tentunossutils.getsigne(cover);
    }
    return cover;
  }
  
  public static string getsigne(string key) {
    if (!key.startswith("/")) key = "/" + key;
    string sign = "";
    string secretid = secret_id;
    string secretkey = secret_key;
    coscredentials cred = new basiccoscredentials(secretid, secretkey);
    cossigner signer = new cossigner();
    // 设置过期时间为1个小时
    date expiredtime = new date(system.currenttimemillis() + 3600l * 1000l);
    // 要签名的 key, 生成的签名只能用于对应此 key 的下载
//    string key = "/exampleobject";
    sign = signer.buildauthorizationstr(httpmethodname.get, key, cred, expiredtime);
    return sign;
  }

xml包:

<!-- 阿里云oss -->
<dependency>
  <groupid>com.aliyun.oss</groupid>
   <artifactid>aliyun-sdk-oss</artifactid>
   <version>3.8.0</version>
</dependency>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。