WebUploader实现图片上传功能

最新推荐文章于 2024-07-16 11:25:15 发布

大圣哥哥阿

最新推荐文章于 2024-07-16 11:25:15 发布

阅读量758

点赞数

分类专栏： JAVA技术文章标签： java jquery html vue js

本文链接：https://blog.csdn.net/p1830095583/article/details/116860979

版权

本文演示了如何在Java SpringMVC环境中结合WebUploader插件实现在JSP页面上的图片上传功能，并将图片上传至阿里云OSS存储服务。前端利用WebUploader与后端交互，后台处理文件接收并生成OSS连接，最终返回图片URL给前端。

摘要由CSDN通过智能技术生成

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

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

预览：

理解： 前端 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)