WebUploader怎么实现图片上传功能

这篇文章将为大家详细讲解有关WebUploader怎么实现图片上传功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

为奉贤等地区用户提供了全套网页设计制作服务，及奉贤网站建设行业解决方案。主营业务为网站设计制作、成都做网站、奉贤网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

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

预览：

WebUploader怎么实现图片上传功能

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

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

//导入 WebUploader插件js、css 样式

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页面

        
          
           选择图片

//上传图片(阿里云) 控制层 @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 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; }

大橙子网站建设，新征程启航

WebUploader怎么实现图片上传功能

其他资讯