SpringBoot 整合七牛云上传图片

简介: SpringBoot 整合七牛云上传图片

在个人的一个项目中有一些需求需要用到图片文件上传,那么相比于阿里云我选择了七牛云,主要还是想白嫖,哈哈。

  • 七牛云每个月有一定的免费额度,对于目前我的项目来说还是足够用的e00248fde54d2f96fb3ba27d1a8027d7.png
  • 阿里云OSS个人理解是上传不收费,但是访问就会产生费用

开通七牛云

  1. 注册登录七牛云:https://sso.qiniu.com/5d58e724f7665b4a9e4451dc59110363.png
  2. 进入管理控制台941183081610a4813f8abef8d69bb43b.png
  3. 选择资源管理→新建存储空间ea29e4cc9ec1ddb98de345730aadf8ac.png
  4. 进入空间管理之后,点击【+新建空间】9ac8ba2217bbd2a94a48ad003028455e.png
  5. 右侧设置【空间名称】,【区域】,【访问控制】649ecc18e801f6fefc87a8fa85eb7c59.png
  6. 空间创建完之后,七牛云会给一个具有一个月时限的测试域名,也可以绑定备案的域名。be3207850ebbf06748fbd2370459571f.png
  7. 到这里,七牛云的对象存储空间就设置成功了。


七牛云开发文档

官方文档地址:https://developer.qiniu.com/kodo/1239/java

  1. 点击【文档】→【开发者中心】75dd8e01633d963745ec4da296ce0345.png
  2. 点击【对象存储】a320590ad301e77f9f967fb65a6595ef.png
  3. 就可以看到官方文档了56824b167a29feccffc8e783df642bc1.png

SpringBoot 上传图片

获取七牛云密钥

  1. 进入七牛云控制台a4b57a529d53f9ed6230809b83b48234.png
  2. 点击【头像】→【密钥管理】70377c13c16ec7502cf0ed7e6bc2d4c3.png
  3. 创建密钥,复制保存,下面要用f34121422f7dc481f3f6b24687b56dbe.png


导入依赖

<!--qiniu依赖-->
<dependency>
    <groupId>com.qiniu</groupId>
    <artifactId>qiniu-java-sdk</artifactId>
    <version>7.2.28</version>
</dependency>
<!--thymeleaf依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

配置 application.yml

spring:
  freemarker:
    suffix: .html
    cache: false
  servlet:
    multipart:
      max-file-size: 20MB
      max-request-size: 20MB
qiniu:
  accessKey: 申请的 AccessKey,AK
  accessSecretKey: 申请的 SecretKey,SK
  bucket: 创建的空间名
  imageUrl: 域名

编写 ImageUtils

图片的上传工具类

@Component
public class ImageUtils {
    @Value("${qiniu.accessKey}")
    private String accessKey;
    @Value("${qiniu.accessSecretKey}")
    private String accessSecretKey;
    @Value("${qiniu.bucket}")
    private String bucket;
    @Value("${qiniu.imageUrl}")
    private String url;
  /**
     * 处理多文件
     * @param multipartFiles
     * @return
     */
    public Map<String, List<String>> uploadImages(MultipartFile[] multipartFiles){
        Map<String,List<String>> map = new HashMap<>();
        List<String> imageUrls = new ArrayList<>();
        for(MultipartFile file : multipartFiles){
            imageUrls.add(uploadImageQiniu(file));
         }
        map.put("imageUrl",imageUrls);
        return map;
    }
    /**
     * 上传图片到七牛云
     * @param multipartFile
     * @return
     */
    private String uploadImageQiniu(MultipartFile multipartFile){
        try {
            //1、获取文件上传的流
            byte[] fileBytes = multipartFile.getBytes();
            //2、创建日期目录分隔
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd");
            String datePath = dateFormat.format(new Date());
            //3、获取文件名
            String originalFilename = multipartFile.getOriginalFilename();
            String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
            String filename = datePath+"/"+UUID.randomUUID().toString().replace("-", "")+ suffix;
            //4.构造一个带指定 Region 对象的配置类
            //Region.huabei(根据自己的对象空间的地址选
            Configuration cfg = new Configuration(Region.huabei());
            UploadManager uploadManager = new UploadManager(cfg);
            //5.获取七牛云提供的 token
            Auth auth = Auth.create(accessKey, accessSecretKey);
            String upToken = auth.uploadToken(bucket);
            uploadManager.put(fileBytes,filename,upToken);
            return url+filename;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

编写 Controller

  1. 跳转到 upload.html 的接口
@Controller
public class PageController {
    @RequestMapping("/upload")
    public String to(){
        return "upload";
    }
}
  1. 图片服务接口
@RestController
@RequestMapping("/api")
public class ImageController {
    @Autowired
    private ImageUtils imageUtils;
    @PostMapping("/image/upload")
    public ResponseResult uploadImage(@RequestParam(value = "file",required = false) MultipartFile[] multipartFile){
        if(ObjectUtils.isEmpty(multipartFile)){
            return new ResponseResult(HttpResponseStatus.OK.code(), "请选择图片");
        }
        Map<String, List<String>> uploadImagesUrl = imageUtils.uploadImages(multipartFile);
        return new ResponseResult(HttpResponseStatus.OK.code(), "上传成功",uploadImagesUrl);
    }
}

注:ResponseResult 为响应结果封装类,自定义即可。

编写前端上传页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://localhost:8002/api/image/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>
</body>

注:<input type="file" name="file">的 name 值一定要和接口的 @RequestParam("file")一样

测试

  1. 访问 http://localhost:8002/uploadda97c5bffb5c5f0f82c971d036891d57.png
  2. 选择图片,点击提交6561dfb0da241403ec5538d42f322b00.png
  3. 上传成功b185bebeccb1f4c9635d2e585af6090a.png
  4. 查看七牛云78b4c1e8485757bf2d4777f2c928ae3b.png



目录
相关文章
|
JavaScript Java
springboot和vue项目如何上传图片,结合若依框架实现
springboot和vue项目如何上传图片,结合若依框架实现
418 0
|
5月前
|
前端开发 Java 数据库
springboot上传图片到本地
springboot上传图片到本地
82 0
|
5月前
|
JavaScript 前端开发
解决editor.md+SpringBoot前后端分离上传图片到阿里云OOS跨域等问题
解决editor.md+SpringBoot前后端分离上传图片到阿里云OOS跨域等问题
70 0
|
12月前
|
SQL 开发框架 JavaScript
Springboot2.0 上传图片 jar包导出启动(第二章)
Springboot2.0 上传图片 jar包导出启动(第二章)
|
Java Maven 对象存储
SpringBoot整合七牛云实现文件上传
七牛云文件上传 1、引入Maven依赖 <dependen
|
前端开发 安全 Java
【图床】SpringBoot上传图片
【图床】SpringBoot上传图片
240 1
|
XML 缓存 开发框架
SpringBoot实践:上传图片文件时,报临时目录不存在
SpringBoot实践:上传图片文件时,报临时目录不存在
346 0
|
Java
SpringBoot项目中可以上传图片,但图片加载失败
最近有个Springboot项目的图片不显示
816 0
SpringBoot---SpringBoot整合七牛云上传图片
SpringBoot---SpringBoot整合七牛云上传图片
SpringBoot---SpringBoot整合七牛云上传图片
|
Java Spring
spring boot 整合七牛云简单使用
spring boot 整合七牛云简单使用
591 0
spring boot 整合七牛云简单使用