SpringBoot整合阿里云OSS文件上傳、下載、查看、刪除

該項目源碼地址：https://github.com/ggb2312/springboot-integration-examples （其中包含SpringBoot和其他常用技術的整合，配套源碼以及筆記。基于最新的 SpringBoot2.1+，歡迎各位 Star）

1. 開發前準備

1.1 前置知識

• java基礎
• SpringBoot簡單基礎知識

1.2 環境參數

• 開發工具：IDEA
• 基礎環境：Maven+JDK8
• 所用技術：SpringBoot、lombok、阿里云OSS存儲服務
• SpringBoot版本：2.1.4

1.3 涉及知識點

• OSS簡介，以及阿里云OSS控制臺快速入門使用
• SpringBoot 整合 阿里云OSS 存儲服務，進行文件上傳、下載、查看、刪除
• 阿里云OSS文檔介紹，以及快速入門使用
• lombok入門使用以及IDEA lombok插件安裝
• SpringMVC與AJAX前后端分離交互
• AJAX文件異步上傳

2. 使用阿里云OSS

對象存儲OSS的多重冗余架構設計，為數據持久存儲提供可靠保障。

2.1 創建Bucket

使用OSS，首先需要創建Bucket，Bucket翻譯成中文是水桶的意思，把存儲的圖片資源看做是水，想要盛水必須得
有桶。
進入控制臺，https://oss.console.aliyun.com/overview

創建完成后，在左側可以看到已經創建好的Bucket：

選擇Bucket后，即可看到對應的信息，如：url、消耗流量等

2.2 管理文件

可以通過在線的方式進行管理文件

2.3 阿里云OSS文檔

阿里云OSS文檔

右側的開發指南說的更加詳細

阿里云雖然提供了完整的文檔，但是做一個完整的前后端交互的文件上傳、下載、查看、刪除等操作，對于小白來說還是有點難度的，所以我把自己學習OSS的步驟以及代碼分享了出來，共有需要的人使用。

3. 項目初始化

3.1 創建SpringBoot項目

在Idea中File——>New——>Project

3.2 Maven依賴

導入Maven相關依賴

<dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>2.8.3</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.4</version><scope>provided</scope></dependency><dependency><groupId>joda-time</groupId><artifactId>joda-time</artifactId><version>2.9.9</version></dependency><dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId><version>3.8.1</version></dependency>

3.3 安裝lombok插件

因為項目中使用了lombok的@Data注解，當然你也可以自己寫get、set等方法。
File——>settings——>Plugins

然后restart IDEA即可。

4. 后端服務編寫

4.1 阿里云OSS配置

在resource下新建一個application-oss.properties

aliyun.endpoint=oss-cn-shanghai.aliyuncs.com aliyun.accessKeyId=你的accessKeyId aliyun.accessKeySecret=你的accessKeySecret aliyun.bucketName=gaojun-testbucket aliyun.urlPrefix=http://gaojun-testbucket.oss-cn-shanghai.aliyuncs.com/ spring.servlet.multipart.max-file-size=100MB spring.servlet.multipart.max-request-size=1000MB

endpoint、bucketName、urlPrefix在OSS主面板就可以看到

accessKeyId、accessKeySecret需要在accesskeys里面查看

在java的包下新建一個config包，創建一個AliyunConfig.java

package com.example.ossdemo.config;import com.aliyun.oss.OSS; import com.aliyun.oss.OSSClient; import lombok.Data; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.PropertySource; /*** @desc*/ @Configuration @PropertySource(value = {"classpath:application-oss.properties"}) @ConfigurationProperties(prefix = "aliyun") @Data public class AliyunConfig {private String endpoint;private String accessKeyId;private String accessKeySecret;private String bucketName;private String urlPrefix;@Beanpublic OSS oSSClient() {return new OSSClient(endpoint, accessKeyId, accessKeySecret);} }

4.2 后端業務

4.2.1 vo

該實體類用于后臺返回給前臺。

package com.example.ossdemo.vo;import lombok.Data;/*** @desc 用于前后端交互的返回值*/ @Data public class FileUploadResult {// 文件唯一標識private String uid;// 文件名private String name;// 狀態有：uploading done error removedprivate String status;// 服務端響應內容，如：'{"status": "success"}'private String response; }

4.2.2 service

在service使用ossClient操作阿里云OSS，進行上傳、下載、刪除、查看所有文件等操作，同時可以將圖片的url進行入庫操作。

package com.example.ossdemo.service;import com.aliyun.oss.OSS; import com.aliyun.oss.model.*; import com.example.ossdemo.config.AliyunConfig; import com.example.ossdemo.vo.FileUploadResult; import org.apache.commons.lang3.RandomUtils; import org.apache.commons.lang3.StringUtils; import org.joda.time.DateTime; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.web.multipart.MultipartFile;import java.io.*; import java.util.List;/*** @desc*/ @Service public class FileUploadService {// 允許上傳的格式private static final String[] IMAGE_TYPE = new String[]{".bmp", ".jpg",".jpeg", ".gif", ".png"};@Autowiredprivate OSS ossClient;@Autowiredprivate AliyunConfig aliyunConfig;/*** @author lastwhisper* @desc 文件上傳* 文檔鏈接 https://help.aliyun.com/document_detail/84781.html?spm=a2c4g.11186623.6.749.11987a7dRYVSzn* @email gaojun56@163.com*/public FileUploadResult upload(MultipartFile uploadFile) {// 校驗圖片格式boolean isLegal = false;for (String type : IMAGE_TYPE) {if (StringUtils.endsWithIgnoreCase(uploadFile.getOriginalFilename(),type)) {isLegal = true;break;}}//封裝Result對象，并且將文件的byte數組放置到result對象中FileUploadResult fileUploadResult = new FileUploadResult();if (!isLegal) {fileUploadResult.setStatus("error");return fileUploadResult;}//文件新路徑String fileName = uploadFile.getOriginalFilename();String filePath = getFilePath(fileName);// 上傳到阿里云try {ossClient.putObject(aliyunConfig.getBucketName(), filePath, newByteArrayInputStream(uploadFile.getBytes()));} catch (Exception e) {e.printStackTrace();//上傳失敗fileUploadResult.setStatus("error");return fileUploadResult;}fileUploadResult.setStatus("done");fileUploadResult.setResponse("success");//this.aliyunConfig.getUrlPrefix() + filePath 文件路徑需要保存到數據庫fileUploadResult.setName(this.aliyunConfig.getUrlPrefix() + filePath);fileUploadResult.setUid(String.valueOf(System.currentTimeMillis()));return fileUploadResult;}/*** @author lastwhisper* @desc 生成路徑以及文件名 例如：//images/2019/04/28/15564277465972939.jpg* @email gaojun56@163.com*/private String getFilePath(String sourceFileName) {DateTime dateTime = new DateTime();return "images/" + dateTime.toString("yyyy")+ "/" + dateTime.toString("MM") + "/"+ dateTime.toString("dd") + "/" + System.currentTimeMillis() +RandomUtils.nextInt(100, 9999) + "." +StringUtils.substringAfterLast(sourceFileName, ".");}/*** @author lastwhisper* @desc 查看文件列表* 文檔鏈接 https://help.aliyun.com/document_detail/84841.html?spm=a2c4g.11186623.2.13.3ad5b5ddqxWWRu#concept-84841-zh* @email gaojun56@163.com*/public List<OSSObjectSummary> list() {// 設置最大個數。final int maxKeys = 200;// 列舉文件。ObjectListing objectListing = ossClient.listObjects(new ListObjectsRequest(aliyunConfig.getBucketName()).withMaxKeys(maxKeys));List<OSSObjectSummary> sums = objectListing.getObjectSummaries();return sums;}/*** @author lastwhisper* @desc 刪除文件* 文檔鏈接 https://help.aliyun.com/document_detail/84842.html?spm=a2c4g.11186623.6.770.4f9474b4UYlCtr* @email gaojun56@163.com*/public FileUploadResult delete(String objectName) {// 根據BucketName,objectName刪除文件ossClient.deleteObject(aliyunConfig.getBucketName(), objectName);FileUploadResult fileUploadResult = new FileUploadResult();fileUploadResult.setName(objectName);fileUploadResult.setStatus("removed");fileUploadResult.setResponse("success");return fileUploadResult;}/*** @author lastwhisper* @desc 下載文件* 文檔鏈接 https://help.aliyun.com/document_detail/84823.html?spm=a2c4g.11186623.2.7.37836e84ZIuZaC#concept-84823-zh* @email gaojun56@163.com*/public void exportOssFile(OutputStream os, String objectName) throws IOException {// ossObject包含文件所在的存儲空間名稱、文件名稱、文件元信息以及一個輸入流。OSSObject ossObject = ossClient.getObject(aliyunConfig.getBucketName(), objectName);// 讀取文件內容。BufferedInputStream in = new BufferedInputStream(ossObject.getObjectContent());BufferedOutputStream out = new BufferedOutputStream(os);byte[] buffer = new byte[1024];int lenght = 0;while ((lenght = in.read(buffer)) != -1) {out.write(buffer, 0, lenght);}if (out != null) {out.flush();out.close();}if (in != null) {in.close();}} }

4.2.3 controller

controller進行接收用戶請求

package com.example.ossdemo.controller;import com.aliyun.oss.model.OSSObjectSummary; import com.example.ossdemo.service.FileUploadService; import com.example.ossdemo.vo.FileUploadResult; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpHeaders; import org.springframework.http.HttpStatus; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.InputStream; import java.net.URLEncoder; import java.util.List;/*** @desc*/ @Controller public class FileUploadController {@Autowiredprivate FileUploadService fileUploadService;/*** @desc 文件上傳到oss* @return FileUploadResult* @Param uploadFile*/@RequestMapping("file/upload")@ResponseBodypublic FileUploadResult upload(@RequestParam("file") MultipartFile uploadFile)throws Exception {return this.fileUploadService.upload(uploadFile);}/*** @return FileUploadResult* @desc 根據文件名刪除oss上的文件* http://localhost:8080/file/delete?fileName=images/2019/04/28/1556429167175766.jpg* @Param objectName*/@RequestMapping("file/delete")@ResponseBodypublic FileUploadResult delete(@RequestParam("fileName") String objectName)throws Exception {return this.fileUploadService.delete(objectName);}/*** @author lastwhisper* @desc 查詢oss上的所有文件* http://localhost:8080/file/list* @return List<OSSObjectSummary>* @Param*/@RequestMapping("file/list")@ResponseBodypublic List<OSSObjectSummary> list()throws Exception {return this.fileUploadService.list();}/*** @author lastwhisper* @desc 根據文件名下載oss上的文件* @return* @Param objectName*/@RequestMapping("file/download")@ResponseBodypublic void download(@RequestParam("fileName") String objectName, HttpServletResponse response) throws IOException {//通知瀏覽器以附件形式下載response.setHeader("Content-Disposition","attachment;filename=" + new String(objectName.getBytes(), "ISO-8859-1"));this.fileUploadService.exportOssFile(response.getOutputStream(),objectName);} }

5. 前端頁面編寫與測試

5.1 文件上傳頁面

使用ajax異步文件上傳到后端對接的OSS上。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>oss文件上傳</title><script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script><script>function uploadfile() {$("#fileTypeError").html('');//獲得文件名稱var fileName = $('#file_upload').val();//截取文件類型,如(.jpg)　　　　　　　　　　　　　　　　var fileType = fileName.substr(fileName.length - 4, fileName.length);if (fileType == '.bmp' || fileType == '.jpg' || fileType == '.jpeg' || fileType == '.gif' || fileType == '.png') {　　　　　//驗證文件類型,此處驗證也可使用正則$.ajax({url: 'file/upload',//上傳地址type: 'POST',cache: false,data: new FormData($('#uploadForm')[0]),//表單數據processData: false,contentType: false,success: function (rtn) {if (rtn.status == 'error') {$("#fileTypeError").html('*上傳文件類型錯誤,支持類型: .bmp .jpg .jpeg .gif .png');　　//根據后端返回值,回顯錯誤信息} else {$('div').append('<img src="' + rtn.name + '" style="width: 300px;height: 300px"></img>')}}});} else {$("#fileTypeError").html('*上傳文件類型錯誤,支持類型: .bmp .jpg .jpeg .gif .png');}}</script> </head> <body> <form id="uploadForm" enctype="multipart/form-data">　　<!-- 聲明文件上傳 --><input id="file_upload" type="file" name="file"/>　　<!-- 定義change事件,選擇文件后觸發 --><br/><span style="color: red" id="fileTypeError"></span>　　　　<!-- 文件類型錯誤回顯,此處通過前后端兩次驗證文件類型 --><br/><input type="button" onclick="uploadfile()" value="上傳"> </form> <div></div> </body> </html>

效果展示：

5.2 文件管理頁面

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>oss文件管理</title><script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script><script type="text/javascript">var pre = 'https://gaojun-testbucket.oss-cn-shanghai.aliyuncs.com/';$(function () {listfile();});//文件列表function listfile() {$.ajax({url: "http://localhost:8080/file/list",type: 'POST',success: function (rtn) {console.log(rtn.length);for (var i = 0; i < rtn.length; i++) {$('div').append('<img src="' + pre + rtn[i].key + '" style="width: 300px;height: 300px; padding: 10px" οndblclick="deletefile(this.src)" οnclick="downloadfile(this.src)"></img>')}}});}//文件下載function downloadfile(src) {var fileName = src.split(pre)[1];window.location.href = "http://localhost:8080/file/download?fileName=" + fileName;}//文件刪除function deletefile(src) {var fileName = src.split(pre)[1];var param = {fileName: fileName};$.ajax({url: "http://localhost:8080/file/delete",data: param,success: function () {alert('刪除成功',fileName);//刪除頁面location.reload();}});}</script> </head> <body> 單擊下載oss上的圖片、雙擊刪除oss上的圖片<br> <div></div> </body> </html>

效果展示：

剛才上傳了一張照片，可以立馬看到

單擊頁面即可下載圖片

雙擊即可刪除圖片：

總結

以上是生活随笔為你收集整理的SpringBoot整合阿里云OSS文件上传、下载、查看、删除的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。