网站首页 > 技术文章 正文
本文实例为大家分享了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).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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持,需要更多资料的同学可以评论私信我,记得一键三连哦谢谢大家
猜你喜欢
- 2024-11-25 超强 Vue+Electron 图床上传工具PicGo
- 2024-11-25 JAVA全栈CMS系统vue图片/视频上传组件,多图上传及删除功能11
- 2024-11-25 SpringCloud+vue实现图片裁剪缩放上传
- 2024-11-25 Node.js实现将文字与图片合成技巧
- 2024-11-25 Nodejs之MEAN栈开发(四)-- form验证及图片上传
- 2024-11-25 基于业务场景下的图片/文件上传方案总结
- 2024-11-25 几行代码实现上传接口,白嫖Github做为在线图床
- 2024-11-25 我带的实习生竟然把图片直接存到了服务器上!崩溃了
- 2024-11-25 Fabric.js 将本地图像上传到画布背景
- 2024-11-25 前端JS判断上传文件是否是图片
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 600℃几个Oracle空值处理函数 oracle处理null值的函数
- 592℃Oracle分析函数之Lag和Lead()使用
- 580℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 576℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 572℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 565℃【数据统计分析】详解Oracle分组函数之CUBE
- 551℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 546℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)