需求:
最近在写自己的小玩具中, 有一个需求是是展示数量不多的轮播图.
方案一:自己搭建一个 ftp 服务器上传图片 然后再搭建一个 nginx 服务器来访问
方案二:采用七牛云存储平台
这里我采用的是方案二 因为上传的数量并不多, 不用费劲用搭建静态资源服务器.
第零步: 准备工作
关于七牛云的介绍和注册使用读者可以自己查看官网
https://www.qiniu.com/
使用七牛云作为图片等静态资源存储的话 查看 对象存储功能。
在实现上传文件到七牛云之前需要准备三个东西。
String accessKey = "your access key"; // 个人中心密钥管理中的 AK
String secretKey = "your secret key"; // 个人中心密钥管理中的 SK
String bucket = "your bucket name"; // 对象存储空间名
第一步: 加入七牛云的官方 sdk
pom.xml
<!-- 上传图片到七牛云 -->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.2.0</version>
</dependency>
第二步: 编写前端页面
editUserInfo.jsp
<!-- 上传图片是需要指定属性 enctype="multipart/form-data" -->
<form id="userForm" action="${pageContext.request.contextPath }/updateUserInfo.action" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="${user.id }"/>
<table width="100%" class="gridtable">
<tr>
<td>用户昵称</td>
<td><input type="text" name="name" value="${user.name }"/></td>
</tr>
<tr>
<td>注册时间</td>
<td><input type="text" name="createtime"
value="<fmt:formatDate value="${user.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/></td>
</tr>
<tr>
<td>用户头像</td>
<td>
<input type="hidden" name="pic" value="${user.avatar }"/>
<c:if test="${user.avatar !=null}">
<img src="${user.avatar}" width=100 height=100 id="preview" />
<br/>
</c:if>
<input type="file" name="pictureFile" onchange="imgPreview(this)"/>
</td>
</tr>
<tr>
<td>签名档</td>
<td><textarea rows="3" cols="30" name="signature">${user.signature }</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
<!-- 实现上传图片预览功能 -->
function imgPreview(fileDom){
//判断是否支持FileReader
if (window.FileReader) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
}
//获取文件
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
alert("请选择图片!");
return;
}
//读取完成
reader.onload = function(e) {
//获取图片dom
var img = document.getElementById("preview");
//图片路径设置为读取的图片
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
</script>
第三步: 编写上传图片工具类
UploadUtil.java
/**
* 上传图片到七牛云
*/
public class UploadUtil {
/**
* 上传文件到七牛云, 并返回网络地址
*
* @param file
* @return
*/
public static String uploadImgToQiuniu(MultipartFile file) throws Exception {
String imgUrl = "";
Configuration cfg = new Configuration(Zone.zone0());
//...其他参数参考类注释
UploadManager uploadManager = new UploadManager(cfg);
//...生成上传凭证,然后准备上传
String accessKey = Constant.ACCESS_KEY;
String secretKey = Constant.SECRET_KEY;
String bucket = Constant.BUCKET;
// 如果不指定 key 值,以文件内容的 hash 值作为文件名
// 获取原文件名的后缀
String originalFilename = file.getOriginalFilename();
String extName = originalFilename.substring(originalFilename.lastIndexOf("."));
String key = UuidUtil.getUUID() + extName;
try {
byte[] uploadBytes = file.getBytes();
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
try {
Response response = uploadManager.put(uploadBytes, key, upToken);
//解析上传成功的结果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
System.out.println(putRet.key);
System.out.println(putRet.hash);
imgUrl = Constant.QIUNIU_DOMAIN + "/" + putRet.key;
} catch (QiniuException ex) {
Response r = ex.response;
System.err.println(r.toString());
try {
System.err.println(r.bodyString());
} catch (QiniuException ex2) {
//ignore
}
}
} catch (UnsupportedEncodingException ex) {
//ignore
}
return imgUrl;
}
编写一个常量 constant.java
package com.liuyishi.ssm.constant;
public interface Constant {
String ACCESS_KEY = "5KolRGQ4iB***SwNk9dj1hno";
String SECRET_KEY = "YIYRKoDbtpr***rw3cQ6Qcu67a9q5JnkgJ";
String BUCKET = "develop";
String QIUNIU_DOMAIN = "http://p5b***eis.bkt.clouddn.com";
}
第四步: 编写 UserController
@RequestMapping("/updateUserInfo")
public String updateImg(User user, MultipartFile pictureFile) throws Exception {
System.out.println("pictureFile = " + pictureFile);
if (pictureFile.getSize() != 0) {
String path = UploadUtil.uploadImgToQiuniu(pictureFile);
items.setPic(path);
}
// 调用service的方法 更新数据库
userService.updateUserInfo(user);
return "redirect:/userList.action";
}
至此, 整个上传图片到七牛云的功能实现.
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于