Fork me on GitHub

JackLin的博客

当前位置:首页 > 标签

SpringBoot 14 Spring 2 SpringMVC 3 MyBatis 2 Linux 4 阿里云 13 宝塔 1 Docker 3 ElasticSearch 2 Redis 4 Shiro 0 Dubbo 0 Swagger 0 Thymeleaf 6 数据库 11 MySQL 11 外键 2 Gradle 1 Test 0 Tomcat 1 JavaWeb 7 Ajax 1 注解 3 css 2 报错 3 多数据源 1 Java基础 1 源码 2 Servlet 1 JSP 1 环境搭建 8 RabbitMQ 1 七牛云 1 Edit.md 1 图像识别 4 英语 2 Zookeeper 1

七牛云实现图片上传,整合Edit.md

  • 2020-05-11
  • 155
  • SpringBoot
今天一个阿里云的ECS云服务器挂了,CPU积分消耗完了。 因为自己的是开源博客可,把数据库的密码放在了github上,没有对配置文件进行一定的修改,导致前段时间一直被攻击,然后CPU积分消耗完了,速度变得特别慢。 于是换了一个阿里云的轻量级应用服务器,然后之前的图片也失效了。终于知道了数据的重要性,之后要在本地和服务器端都要做好备份工作。 现在干脆利用七牛云的对象存储服务来存储自己博客的图片。同时本地做好备份,服务器端也做好备份。 好了,废话不多说,进入正题。 ---- ## (1)基本的图片上传功能 ### 1. 注册七牛云账号 地址:https://www.qiniu.com/ 注册账号,实名认证之后就可以用了。实名认证很快的,差不多从注册开始不到10分钟就可以搞完。 ### 2. 创建空间 进入控制台,在左侧 “对象存储” 中找到 “空间管理”,新建一个空间。选择 “公开” ![](http://image.linkaiblog.top/image-20200511111134142.png) ### 3. 绑定自己的域名 七牛云会提供一个免费的域名给你,不过只能用 30 天,我们可以使用自己的域名 在控制台左侧 “CND” 中选择 “域名管理”,添加一个自己的域名。之后选择默认的配置即可,然后等待3分钟左右添加成功。 域名尽量原则带绑定带前缀的域名,例如 xxx.baidu.com ,用百度举个例子,因为后面配置 CNAME 是可能会产生冲突 ![](http://image.linkaiblog.top/image-20200511111427001.png) ### 4. 配置 CNAME 添加域名之后,配置CNAME,可以参考给出的文档,文档已经写得特别详细了 ![](http://image.linkaiblog.top/image-20200511111720521.png) 配置 CNAME 文档地址: https://developer.qiniu.com/fusion/kb/1322/how-to-configure-cname-domain-name 由于我的域名使用过 A 记录解析,所以会产生冲突,于是我有重新添加了一个域名: image.linkaiblog.top 在阿里云控制台如下图所示: ![](http://image.linkaiblog.top/image-20200511112203138.png) 配置成功之后在七牛云 “空间管理” 中的 CDN 加速域名的状态会显示为成功 ![](http://image.linkaiblog.top/image-20200511112321786.png) ### 5.之后我们就可以上传文件了 ![](http://image.linkaiblog.top/image-20200511112437984.png) 上传功能之后点击右侧的 “详情”就可以查看图片的信息了 ![](http://image.linkaiblog.top/image-20200511112532129.png) ### 6. 在 Typora 中查看 复制图片的外链,在 Typora 中输入,查看结果如下所示 ![](http://image.linkaiblog.top/image-20200511112807605.png) ## (2)使用 API 在代码中实现 之前都是一些基础的功能,上传图片的话还得手动上传,在 MarkDown 中贴图片链接,我们自然是觉得很麻烦的。 在我们的博客后台中,可以调用七牛云提供的 API,实现图片的上传。 各种SDK地址:https://developer.qiniu.com/sdk#official-sdk 文档地址:https://developer.qiniu.com/kodo/sdk/1239/java#install-by-maven ### 1. 添加 Maven 依赖 ![](http://image.linkaiblog.top/image-20200511113722866.png) 选择一个版本,去仓库看一下,就用最新的吧 7.2.29 ![](http://image.linkaiblog.top/image-20200511113812825.png) 记得还要添加第3方依赖,可能用到 ![](http://image.linkaiblog.top/image-20200511133533502.png) ### 2. 编写 Java 代码 - 文档中已经很详细了,这里我们演示一下本地的文件上传 ![](http://image.linkaiblog.top/image-20200511125008496.png) - 编写对应的测试类,注意,有很多同名的类名,需要使用 com.qiniu.storage 包下面的类 ``` package com.linkai.myblog; import com.google.gson.Gson; import com.qiniu.common.QiniuException; import com.qiniu.http.Response; import com.qiniu.storage.Configuration; import com.qiniu.storage.Region; import com.qiniu.storage.UploadManager; import com.qiniu.storage.model.DefaultPutRet; import com.qiniu.util.Auth; import org.junit.jupiter.api.Test; @SpringBootTest class MyblogApplicationTests { @Test void testUpload() { // 注意是在 :com.qiniu.storage 包下面的 Configuration cfg = new Configuration(Region.region2()); // 由于我们选择的是华南的机房,所以这里调用 region2() UploadManager uploadManager = new UploadManager(cfg); String accessKey = "your access key"; String secretKey = "your secret key"; String bucket = "your bucket name"; // 填写我们的存储空间的名称 //如果是Windows情况下,格式是 D:\\qiniu\\test.png String localFilePath = "D:\\temp\\test.png"; //默认不指定key的情况下,以文件内容的hash值作为文件名 String key = null; Auth auth = Auth.create(accessKey, secretKey); String upToken = auth.uploadToken(bucket); // com.qiniu.http.Response; try { Response response = uploadManager.put(localFilePath, key, upToken); // 解析上传成功的结果 DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class); System.out.println(putRet.key); System.out.println(putRet.hash); } catch (QiniuException e) { Response r = e.response; System.err.println(r.toString()); try { System.err.println(r.bodyString()); } catch (QiniuException ex) { ex.printStackTrace(); } } } } ``` - 特别注意包名,要导入正确的包 ![](http://image.linkaiblog.top/image-20200511125627691.png) ### 3. 启动测试类 测试成功,打印了我们的文件内容的hash值 ![](http://image.linkaiblog.top/image-20200511125721039.png) ### 4. 回到七牛云的控制台查看效果 ![](http://image.linkaiblog.top/image-20200511124905932.png) ## (3)整合 Edit.md 由于我们的博客后台使用的是 Edit.md 作为 Markdown 编辑器,之前上传文件都是直接保存到服务器上的,用了七牛云的图床之后,对代码稍微修改一下。 - 由于在 Controller 中我们传入的参数是 MultipartFile 对象,获取文件路径比较麻烦,所以我们可以直接用 MultipartFile 对象的 getBytes() 方法获取字节数组,利用字节数组上传 ### 1. 具体代码 ``` package com.linkai.myblog.controller; import com.alibaba.fastjson.JSONObject; import com.google.gson.Gson; import com.qiniu.common.QiniuException; import com.qiniu.http.Response; import com.qiniu.storage.Configuration; import com.qiniu.storage.Region; import com.qiniu.storage.UploadManager; import com.qiniu.storage.model.DefaultPutRet; import com.qiniu.util.Auth; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.commons.CommonsMultipartFile; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.net.URLEncoder; @RestController public class FileController { @RequestMapping("/uploadQNY") public JSONObject fileUploadQNY(@RequestParam("editormd-image-file") MultipartFile file, HttpServletRequest request) { // 注意是在 :com.qiniu.storage 包下面的 Configuration cfg = new Configuration(Region.region2()); // 由于我们选择的是华南的机房,所以这里调用 region2() UploadManager uploadManager = new UploadManager(cfg); String accessKey = "your access key"; String secretKey = "your secret key"; String bucket = "jacklin-blog"; // 填写我们的存储空间的名称 //默认不指定key的情况下,以文件内容的hash值作为文件名 // 我们这里的 key 可以指定为本地文件的文件名 String key = file.getOriginalFilename(); // Edit.md 构造返回的 Json 字符串,这里的 url 就设置成 文件的名称即可 JSONObject jsonObject = new JSONObject(); jsonObject.put("url", "http://image.linkaiblog.top/" + key); jsonObject.put("message", "upload success!"); //如果文件名为空,直接回到返回 if ("".equals(key)){ // 0 表示上传失败 jsonObject.put("success", 0); return jsonObject; } try { byte[] uploadButes = file.getBytes(); Auth auth = Auth.create(accessKey, secretKey); String upToken = auth.uploadToken(bucket); Response response = uploadManager.put(uploadButes, key, upToken); // 解析上传成功的结果 --》 需要用到 com.google.gson.Gson DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class); System.out.println("文件名为:" + putRet.key); System.out.println("文件内容的hash值为" + putRet.hash); } catch (QiniuException ex) { Response r = ex.response; System.err.println(r.toString()); try { System.err.println(r.bodyString()); } catch (QiniuException ex2) { //ignore } } catch (IOException e) { e.printStackTrace(); } // 1 表示上传成功 jsonObject.put("success", 1); return jsonObject; } ``` ### 2. 测试上传 ![](http://image.linkaiblog.top/image-20200511134309964.png) ![](http://image.linkaiblog.top/image-20200511134356628.png) 回到控制台查看效果 ![](http://image.linkaiblog.top/image-20200511124905932.png)