- 客户端上传
- 客户端将数据提交给云服务器,并等待其相应。
- 用户上传头像时,将表单数据提交给云服务器。
- 服务器直传
- 应用服务器将数据直接提交给云服务器,并等待其响应。
- 分享时,服务端将自动生成的图片,直接提交给云服务器。
1.客服端上传头像
1.1 导入依赖
<!--qiniu-->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.2.23</version>
</dependency>
1.2 配置文件
#qiniu
qiniu:
key:
access: eqBn1mu_ZMyMI7X3Y3O3v-J-bg0Z12YEtKw1tAiP
secret: KdBumM9ve39vqWOUbAKEpu3JLVHNbC76HVBp1r7M
bucket:
header:
name: communityuserheader
url: http://qwe0jgiwx.hd-bkt.clouddn.com
share:
name: communityimgshare
url: http://qwe0nafm0.hd-bkt.clouddn.com
key:密钥
bucket为空间:其中name是空间名称,url是域名
1.3 UserController
import com.nowcoder.community.annotation.LoginRequired;
import com.nowcoder.community.entity.User;
import com.nowcoder.community.service.FollowService;
import com.nowcoder.community.service.LikeService;
import com.nowcoder.community.service.UserServiceImpl;
import com.nowcoder.community.util.CommunityConstant;
import com.nowcoder.community.util.CommunityUtil;
import com.nowcoder.community.util.HostHolder;
import com.qiniu.util.Auth;
import com.qiniu.util.StringMap;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
@Controller
public class UserController implements CommunityConstant {
private static final Logger logger= LoggerFactory.getLogger(UserController.class);
@Value("${community.path.upload}")
private String uploadPath;
@Value("${community.path.domain}")
private String domain;
@Value("${server.servlet.context-path}")
private String contextPath;
@Autowired
private UserServiceImpl userService;
@Autowired
private HostHolder hostHolder;
@Autowired
private LikeService likeService;
@Autowired
private FollowService followService;
@Value("${qiniu.key.access}")
private String accessKey;
@Value("${qiniu.key.secret}")
private String secretKey;
@Value("${qiniu.bucket.header.name}")
private String headerBucketName;
@Value("${qiniu.bucket.header.url}")
private String headerBucketUrl;
@LoginRequired
@GetMapping("/setting")
public String getSettingPage(Model model){
//上传文件名称
String fileName = CommunityUtil.generateUUID();
//设置响应信息
StringMap policy = new StringMap();
policy.put("returnBody",CommunityUtil.getJSONString(0));
//生成上传凭证
Auth auth = Auth.create(accessKey, secretKey);
String uploadToken = auth.uploadToken(headerBucketName, fileName, 3600,policy);
model.addAttribute("uploadToken",uploadToken);
model.addAttribute("fileName",fileName);
return "/site/setting";
}
//更新头像路径
@PostMapping("/header/url")
@ResponseBody
public String updateHeaderUrl(String fileName){
if (StringUtils.isBlank(fileName)){
return CommunityUtil.getJSONString(1,"文件名不能为空");
}
String url = headerBucketUrl + "/" + fileName;
userService.updateHeader(hostHolder.getUser().getId(),url);
return CommunityUtil.getJSONString(0);
}
// 将文件上传到本地 我们选择废弃
@LoginRequired
@PostMapping("/upload")
public String uploadHeader(MultipartFile headerImage, Model model){
if (headerImage==null){
model.addAttribute("error","您还没有选择图片!");
return "/site/setting";
}
String fileName=headerImage.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf("."));
if (StringUtils.isBlank(suffix)){
model.addAttribute("error","文件格式不正确!");
return "/site/setting";
}
//生成随机文件名
fileName= CommunityUtil.generateUUID()+suffix;
//确定文件存放的路径
File file1 = new File(uploadPath);
if (!file1.exists()){
file1.mkdir();
}
File file = new File(file1 + "/" + fileName);
try {
//存储文件
headerImage.transferTo(file);
} catch (IOException e) {
logger.error("上传文件失败:"+e.getMessage());
throw new RuntimeException("上传文件失败,服务器发生异常!",e);
}
//更新当前用户的头像路径(web访问路径)
// http://localhost:8080/community/header/xxx.png
User user = hostHolder.getUser();
String headerUrl=domain+contextPath+"/header/"+fileName;
userService.updateHeader(user.getId(),headerUrl);
return "redirect:/index";
}
//将本地的图片显示在网站上 我们选择废弃
@GetMapping("/header/{fileName}")
public void getHeader(@PathVariable("fileName") String fileName, HttpServletResponse response){
//服务器存放路径
fileName=uploadPath+"/"+fileName;
//文件后缀
String suffix = fileName.substring(fileName.lastIndexOf("."));
//响应图片
response.setContentType("image/"+suffix);
try (FileInputStream fis = new FileInputStream(fileName);
ServletOutputStream os = response.getOutputStream();)
{
byte[] bytes=new byte[1024];
int len=0;
while ((len=fis.read(bytes))!=-1){
os.write(bytes,0,len);
}
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
logger.error("读取头像失败:"+e.getMessage());
}
}
@LoginRequired
@PostMapping("/updatePassword")
public String updatePassword(String originalPassword,String newPassword,String confirmPassword,Model model){
if (originalPassword==null){
model.addAttribute("originalPasswordMsg","请输入原始密码!");
return "/site/setting";
}
if (newPassword==null){
model.addAttribute("newPasswordMsg","请输入新密码!");
return "/site/setting";
}
if (confirmPassword==null){
model.addAttribute("confirmPasswordMsg","请确认密码!");
return "/site/setting";
}
//确认账号
User user = hostHolder.getUser();
if (!CommunityUtil.md5(originalPassword+user.getSalt()).equals(user.getPassword())){
model.addAttribute("originalPasswordMsg","密码错误!");
return "/site/setting";
}
if (!confirmPassword.equals(newPassword)){
model.addAttribute("confirmPasswordMsg","两次输入的密码不一致!");
return "/site/setting";
}
userService.updatePassword(user.getId(),CommunityUtil.md5(newPassword+user.getSalt()));
return "redirect:/index";
}
//个人主页
@GetMapping("/profile/{userId}")
public String getProfilePage(@PathVariable("userId") int userId,Model model){
User user = userService.selectById(userId);
if (user==null){
throw new RuntimeException("该用户不存在!");
}
//用户
model.addAttribute("user",user);
//点赞数量
int likeCount = likeService.selectUserLikeCount(userId);
model.addAttribute("likeCount",likeCount);
//关注数量
long followeeCount = followService.selectFolloweeCount(userId, ENTITY_TYPE_USER);
model.addAttribute("followeeCount",followeeCount);
//粉丝数量
long followerCount = followService.selectFollowerCount(ENTITY_TYPE_USER, userId);
model.addAttribute("followerCount",followerCount);
//当前登录用户是否已关注
boolean hasFollowed=false;
if(hostHolder.getUser()!=null){
hasFollowed = followService.hasFollowed(hostHolder.getUser().getId(), ENTITY_TYPE_USER, userId);
}
model.addAttribute("hasFollowed",hasFollowed);
return "/site/profile";
}
}
1.4 setting.html
<!--上传到本地-->
<!--
<form class="mt-5" method="post" enctype="multipart/form-data" th:action="@{/upload}">
<div class="form-group row mt-4">
<label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label>
<div class="col-sm-10">
<div class="custom-file">
<input type="file" th:class="|custom-file-input ${error!=null ? 'is-invalid' : ''}|" name="headerImage" id="head-image" lang="es" required="">
<label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label>
<div class="invalid-feedback" th:text="${error}">
该账号不存在!
</div>
</div>
</div>
</div>
<div class="form-group row mt-4">
<div class="col-sm-2"></div>
<div class="col-sm-10 text-center">
<button type="submit" class="btn btn-info text-white form-control">立即上传</button>
</div>
</div>
</form>
-->
<!--上传到七牛云-->
<form class="mt-5" id="uploadForm">
<div class="form-group row mt-4">
<label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label>
<div class="col-sm-10">
<div class="custom-file">
<input type="hidden" name="token" th:value="${uploadToken}">
<input type="hidden" name="key" th:value="${fileName}">
<input type="file" class="custom-file-input" id="head-image" name="file" lang="es" required="">
<label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label>
<div class="invalid-feedback">
该账号不存在!
</div>
</div>
</div>
</div>
<div class="form-group row mt-4">
<div class="col-sm-2"></div>
<div class="col-sm-10 text-center">
<button type="submit" class="btn btn-info text-white form-control">立即上传</button>
</div>
</div>
</form>
1.5 setting.js
$(function (){
$("#uploadForm").submit(upload);
});
function upload() {
$.ajax({
url: "http://upload.qiniup.com",
method: "post",
processData: false,
contentType: false,
data: new FormData($("#uploadForm")[0]),
success: function (data) {
if (data&&data.code==0){
//更新头像访问路径
$.post(
CONTEXT_PATH+"/header/url",
{"fileName":$("input[name='key']").val()},
function (data) {
data=$.parseJSON(data);
if (data.code==0){
window.location.reload();
}else {
alert(data.msg);
}
}
);
}else {
alert("上传失败!");
}
}
});
return false;
}
1.6 FirewallConfig
SpringSecurity本身不支持带有双斜杠的访问路径,应自己定义配置
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.web.firewall.HttpFirewall;
import org.springframework.security.web.firewall.StrictHttpFirewall;
@Configuration
public class FirewallConfig {
@Bean
public HttpFirewall allowUrlEncodedSlashHttpFirewall() {
StrictHttpFirewall firewall = new StrictHttpFirewall();
firewall.setAllowUrlEncodedSlash(true);
return firewall;
}
}
2.服务端直传图片
2.1 ShareController
import com.nowcoder.community.entity.Event;
import com.nowcoder.community.event.EventProducer;
import com.nowcoder.community.util.CommunityConstant;
import com.nowcoder.community.util.CommunityUtil;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@Controller
public class ShareController implements CommunityConstant {
private static final Logger logger= LoggerFactory.getLogger(ShareController.class);
@Autowired
private EventProducer eventProducer;
@Value("${community.path.domain}")
private String domain;
@Value("${server.servlet.context-path}")
private String contextPath;
@Value("${wk.image.storage}")
private String wkImageStorage;
@Value("${qiniu.bucket.share.url}")
private String shareBucketUrl;
@GetMapping("/share")
@ResponseBody
public String share(String htmlUrl){
//文件名
String fileName = CommunityUtil.generateUUID();
//异步生成长图
Event event = new Event()
.setTopic(TOPIC_SHARE)
.setData("htmlUrl",htmlUrl)
.setData("fileName",fileName)
.setData("suffix",".png");
eventProducer.fireEvent(event);
//返回访问路径
Map<String,Object> map=new HashMap<>();
//map.put("shareUrl",domain+contextPath+"/share/image/"+fileName);
map.put("shareUrl",shareBucketUrl+"/"+fileName);
return CommunityUtil.getJSONString(0,null,map);
}
//从本地获取图片,然后显示在客户端 我们选择废弃
//获取长图
@GetMapping("/share/image/{fileName}")
public void getShareImage(@PathVariable("fileName") String fileName, HttpServletResponse response){
if (StringUtils.isBlank(fileName)){
throw new IllegalArgumentException("文件名不能为空!");
}
response.setContentType("image/png");
File file=new File(wkImageStorage+"/"+fileName+".png");
try {
ServletOutputStream os = response.getOutputStream();
FileInputStream fis=new FileInputStream(file);
byte[] buffer=new byte[1024];
int len=0;
while ((len= fis.read(buffer))!=-1){
os.write(buffer,0,len);
}
} catch (IOException e) {
logger.error("获取长图失败:"+e.getMessage());
}
}
}
2.2 EventConsumer
import com.alibaba.fastjson.JSONObject;
import com.nowcoder.community.entity.DiscussPost;
import com.nowcoder.community.entity.Event;
import com.nowcoder.community.entity.Message;
import com.nowcoder.community.service.DiscussPostServiceImpl;
import com.nowcoder.community.service.ElasticsearchService;
import com.nowcoder.community.service.MessageServiceImpl;
import com.nowcoder.community.util.CommunityConstant;
import com.nowcoder.community.util.CommunityUtil;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
import com.qiniu.util.StringMap;
import org.apache.kafka.clients.consumer.ConsumerRecord;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.kafka.annotation.KafkaListener;
import org.springframework.scheduling.concurrent.ThreadPoolTaskScheduler;
import org.springframework.stereotype.Component;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.Future;
@Component
public class EventConsumer implements CommunityConstant {
private static final Logger logger= LoggerFactory.getLogger(EventConsumer.class);
@Autowired
private MessageServiceImpl messageService;
@Autowired
private DiscussPostServiceImpl discussPostService;
@Autowired
private ElasticsearchService elasticsearchService;
@Value("${wk.image.command}")
private String wkImageCommand;
@Value("${wk.image.storage}")
private String wkImageStorage;
@Value("${qiniu.key.access}")
private String accessKey;
@Value("${qiniu.key.secret}")
private String secretKey;
@Value("${qiniu.bucket.share.name}")
private String shareBucketName;
@Autowired
private ThreadPoolTaskScheduler taskScheduler;
@KafkaListener(topics = {TOPIC_COMMENT,TOPIC_FOLLOW,TOPIC_LIKE})
public void handleCommentMessage(ConsumerRecord record){
if (record==null||record.value()==null){
logger.error("消息的内容为空!");
return;
}
Event event= JSONObject.parseObject(record.value().toString(),Event.class);
if (event==null){
logger.error("消息格式错误!");
return;
}
//发送站内通知
Message message=new Message();
message.setFromId(SYSTEM_USER_ID);
message.setToId(event.getEntityUserId());
message.setConversationId(event.getTopic());
message.setCreateTime(new Date());
Map<String,Object> content=new HashMap<>();
content.put("userId",event.getUserId());
content.put("entityType",event.getEntityType());
content.put("entityId",event.getEntityId());
if (!event.getData().isEmpty()){
for (Map.Entry<String, Object> entry : event.getData().entrySet()) {
content.put(entry.getKey(), entry.getValue());
}
}
message.setContent(JSONObject.toJSONString(content));
messageService.addMessage(message);
}
//消费发帖事件
@KafkaListener(topics = {TOPIC_PUBLISH})
public void handlePublishMessage(ConsumerRecord record){
if (record==null||record.value()==null){
logger.error("消息的内容为空!");
return;
}
Event event=JSONObject.parseObject(record.value().toString(),Event.class);
if (event==null){
logger.error("消息格式错误!");
return;
}
DiscussPost post = discussPostService.selectDiscussPostById(event.getEntityId());
elasticsearchService.saveDiscussPost(post);
}
//消费删帖事件
@KafkaListener(topics = {TOPIC_DELETE})
public void handleDeleteMessage(ConsumerRecord record){
if (record==null||record.value()==null){
logger.error("消息的内容为空!");
return;
}
Event event = JSONObject.parseObject(record.value().toString(), Event.class);
if (event==null){
logger.error("消息格式错误!");
return;
}
elasticsearchService.deleteDiscussPost(event.getEntityId());
}
//消费分享事件
@KafkaListener(topics = {TOPIC_SHARE})
public void handleShareMessage(ConsumerRecord record){
if (record==null||record.value()==null){
logger.error("消息格式错误!");
return;
}
Event event=JSONObject.parseObject(record.value().toString(),Event.class);
if (event==null){
logger.error("消息格式错误!");
return;
}
String htmlUrl = (String) event.getData().get("htmlUrl");
String fileName = (String) event.getData().get("fileName");
String suffix = (String) event.getData().get("suffix");
String cmd=wkImageCommand+" --quality 75 "+htmlUrl+" "+wkImageStorage+"/"+fileName+suffix;
try {
Runtime.getRuntime().exec(cmd);
logger.info("生成长图成功:"+cmd);
} catch (IOException e) {
logger.error("生成长图失败:"+e.getMessage());
}
// 启用定时器,监视该图片,一旦生成了,则上传至七牛云.
UploadTask task = new UploadTask(fileName, suffix);
Future future = taskScheduler.scheduleAtFixedRate(task, 500);
task.setFuture(future);
}
class UploadTask implements Runnable {
// 文件名称
private String fileName;
// 文件后缀
private String suffix;
// 启动任务的返回值
private Future future;
// 开始时间
private long startTime;
// 上传次数
private int uploadTimes;
public UploadTask(String fileName, String suffix) {
this.fileName = fileName;
this.suffix = suffix;
this.startTime = System.currentTimeMillis();
}
public void setFuture(Future future) {
this.future = future;
}
@Override
public void run() {
// 生成失败
if (System.currentTimeMillis() - startTime > 30000) {
logger.error("执行时间过长,终止任务:" + fileName);
future.cancel(true);
return;
}
// 上传失败
if (uploadTimes >= 3) {
logger.error("上传次数过多,终止任务:" + fileName);
future.cancel(true);
return;
}
String path = wkImageStorage + "/" + fileName + suffix;
File file = new File(path);
if (file.exists()) {
logger.info(String.format("开始第%d次上传[%s].", ++uploadTimes, fileName));
// 设置响应信息
StringMap policy = new StringMap();
policy.put("returnBody", CommunityUtil.getJSONString(0));
// 生成上传凭证
Auth auth = Auth.create(accessKey, secretKey);
String uploadToken = auth.uploadToken(shareBucketName, fileName, 3600, policy);
// 指定上传机房
UploadManager manager = new UploadManager(new Configuration(Zone.zone0()));
try {
// 开始上传图片
Response response = manager.put(
path, fileName, uploadToken, null, "image/" + suffix, false);
// 处理响应结果
JSONObject json = JSONObject.parseObject(response.bodyString());
if (json == null || json.get("code") == null || !json.get("code").toString().equals("0")) {
logger.info(String.format("第%d次上传失败[%s].", uploadTimes, fileName));
} else {
logger.info(String.format("第%d次上传成功[%s].", uploadTimes, fileName));
future.cancel(true);
}
} catch (QiniuException e) {
logger.info(String.format("第%d次上传失败[%s].", uploadTimes, fileName));
}
} else {
logger.info("等待图片生成[" + fileName + "].");
}
}
}
}