SpringBoot整合七牛云上傳圖片的示例代碼

更新時(shí)間：2023年10月31日 15:04:10 作者：I'm Jie

本文就來介紹了SpringBoot整合七牛云上傳圖片的示例代碼,用戶在前端上傳圖片后,交由后端處理,上傳至七牛云,感興趣的可以了解一下

開通七牛云

注冊(cè)登錄七牛云：https://sso.qiniu.com/

進(jìn)入管理控制臺(tái)

選擇資源管理→新建存儲(chǔ)空間

進(jìn)入空間管理之后，點(diǎn)擊【+新建空間】

右側(cè)設(shè)置【空間名稱】，【區(qū)域】，【訪問控制】

空間創(chuàng)建完之后，七牛云會(huì)給一個(gè)具有一個(gè)月時(shí)限的測(cè)試域名，也可以綁定備案的域名。

到這里，七牛云的對(duì)象存儲(chǔ)空間就設(shè)置成功了。

七牛云開發(fā)文檔

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

點(diǎn)擊【文檔】→【開發(fā)者中心】

點(diǎn)擊【對(duì)象存儲(chǔ)】

就可以看到官方文檔了

SpringBoot 上傳圖片

獲取七牛云密鑰

進(jìn)入七牛云控制臺(tái)

點(diǎn)擊【頭像】→【密鑰管理】

創(chuàng)建密鑰，復(fù)制保存，下面要用

導(dǎo)入依賴

<!--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: 申請(qǐng)的 AccessKey,AK
  accessSecretKey: 申請(qǐng)的 SecretKey,SK
  bucket: 創(chuàng)建的空間名
  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、創(chuàng)建日期目錄分隔
            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.構(gòu)造一個(gè)帶指定 Region 對(duì)象的配置類
            //Region.huabei(根據(jù)自己的對(duì)象空間的地址選
            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

跳轉(zhuǎn)到 upload.html 的接口

@Controller
public class PageController {

    @RequestMapping("/upload")
    public String to(){
        return "upload";
    }

}

圖片服務(wù)接口

@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(), "請(qǐng)選擇圖片");
        }
        Map<String, List<String>> uploadImagesUrl = imageUtils.uploadImages(multipartFile);
        return new ResponseResult(HttpResponseStatus.OK.code(), "上傳成功",uploadImagesUrl);
    }

}

注：ResponseResult 為響應(yīng)結(jié)果封裝類，自定義即可。

編寫前端上傳頁面

<!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")一樣