該項目源碼地址: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的步驟以及代碼分享了出來,共有需要的人使用。
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
*
* @author lastwhisper
* @email [email protected]
*/
@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;
@Bean
public OSS oSSClient() {
return new OSSClient(endpoint, accessKeyId, accessKeySecret);
}
}
4.2 後端業務
4.2.1 vo
該實體類用於後臺返回給前臺。
package com.example.ossdemo.vo;
import lombok.Data;
/**
* @author lastwhisper
* @desc 用於前後端交互的返回值
* @email [email protected]
*/
@Data
public class FileUploadResult {
// 文件唯一標識
private String uid;
// 文件名
private String name;
// 狀態有:uploading done error removed
private 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;
/**
* @author lastwhisper
* @desc
* @email [email protected]
*/
@Service
public class FileUploadService {
// 允許上傳的格式
private static final String[] IMAGE_TYPE = new String[]{".bmp", ".jpg",
".jpeg", ".gif", ".png"};
@Autowired
private OSS ossClient;
@Autowired
private AliyunConfig aliyunConfig;
/**
* @author lastwhisper
* @desc 文件上傳
* 文檔鏈接 https://help.aliyun.com/document_detail/84781.html?spm=a2c4g.11186623.6.749.11987a7dRYVSzn
* @email [email protected]
*/
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, new
ByteArrayInputStream(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 [email protected]
*/
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 [email protected]
*/
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 [email protected]
*/
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 [email protected]
*/
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;
/**
* @author lastwhisper
* @desc
* @email [email protected]
*/
@Controller
public class FileUploadController {
@Autowired
private FileUploadService fileUploadService;
/**
* @author lastwhisper
* @desc 文件上傳到oss
* @return FileUploadResult
* @Param uploadFile
*/
@RequestMapping("file/upload")
@ResponseBody
public 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
* @author lastwhisper
* @Param objectName
*/
@RequestMapping("file/delete")
@ResponseBody
public 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")
@ResponseBody
public List<OSSObjectSummary> list()
throws Exception {
return this.fileUploadService.list();
}
/**
* @author lastwhisper
* @desc 根據文件名下載oss上的文件
* @return
* @Param objectName
*/
@RequestMapping("file/download")
@ResponseBody
public 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>
效果展示:
剛纔上傳了一張照片,可以立馬看到
單擊頁面即可下載圖片
雙擊即可刪除圖片: