文章目錄

• • 一. 阿里云OSS存儲
  • • 1. 注冊并創建存儲空間
    • 2. 獲取 key
    • 3. 官方文檔
  • 二. 頭像上傳后臺開發
  • • 1. service-oss 模塊搭建
    • 2. 后臺上傳代碼
  • 三. nginx 請求轉發
  • • 1. nginx 基礎概念
    • 2. 實現請求轉發
  • 四. 頭像上傳前端代碼
  • • 1. 導入上傳文件模塊
    • 2. 頭像上傳組件
  • 五. EasyExcel的使用
  • • 1. 引入 pom 依賴
    • 2. 寫操作
    • 3. 讀操作

一. 阿里云OSS存儲

阿里云的對象存儲 OSS 提供海量、安全、低成本、高可靠的云存儲服務，很多公司都會使用它來進行數據存儲。因此，我們將講師頭像存儲在這里。

1. 注冊并創建存儲空間

進入阿里云官網，注冊賬號登錄，并實名認證。之后找到 OSS 存儲：

進入后點擊【立即開通】，開通成功后，按鈕變為【管理控制臺】，點擊后進入下列頁面。點擊【創建 Buket】即可創建一個存儲空間：

點擊剛創建的 bucket 名稱，可以查看存儲的東西，或者上傳文件：

2. 獲取 key

在主頁面，有一個【Access Key】按鈕，點擊后按照要求獲取 key 供后續代碼使用：

3. 官方文檔

阿里云 OSS Java 使用官方文檔

（1）安裝

在pom.xml中添加：

<dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.8.0</version> </dependency>

（2）使用代碼創建存儲空間

// Endpoint以杭州為例，其它Region請按實際情況填寫。 String endpoint = "http://oss-cn-hangzhou.aliyuncs.com"; // 阿里云主賬號AccessKey擁有所有API的訪問權限，風險很高。強烈建議您創建并使用RAM賬號進行API訪問或日常運維，請登錄 https://ram.console.aliyun.com 創建RAM賬號。 String accessKeyId = "<yourAccessKeyId>"; String accessKeySecret = "<yourAccessKeySecret>"; String bucketName = "<yourBucketName>";// 創建OSSClient實例。 OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);// 創建存儲空間。 ossClient.createBucket(bucketName);// 關閉OSSClient。 ossClient.shutdown();

（3）上傳文件流

// Endpoint以杭州為例，其它Region請按實際情況填寫。 String endpoint = "http://oss-cn-hangzhou.aliyuncs.com"; // 云賬號AccessKey有所有API訪問權限，建議遵循阿里云安全最佳實踐，創建并使用RAM子賬號進行API訪問或日常運維，請登錄 https://ram.console.aliyun.com 創建。 String accessKeyId = "<yourAccessKeyId>"; String accessKeySecret = "<yourAccessKeySecret>";// 創建OSSClient實例。 OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);// 上傳文件流。 InputStream inputStream = new FileInputStream("<yourlocalFile>"); ossClient.putObject("<yourBucketName>", "<yourObjectName>", inputStream);// 關閉OSSClient。 ossClient.shutdown();

二. 頭像上傳后臺開發

1. service-oss 模塊搭建

（1）在 service 下右鍵選擇 New Module… 創建一個子模塊 service-oss；
（2）在 pom.xml 中添加 oss 依賴（版本信息在主模塊中已經配置了）：

<dependencies><!--阿里云oss依賴--><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId></dependency> </dependencies>

（3）創建 application.properties 以及啟動類文件：

#服務端口號 server.port=8082#服務名 spring.application.name=service-oss #環境設置 spring.profiles.active=dev#阿里云 OSS #不同的服務器，地址不同 aliyun.oss.file.endpoint=oss-cn-beijing.aliyuncs.com aliyun.oss.file.keyid=LTAI4GEMTPi4AYWfHuxkiGA9 aliyun.oss.file.keysecret=ijJ10mCflSnbVc89V3zFIYT3zQqpze #bucket可以在控制臺創建，也可以使用java代碼創建 aliyun.oss.file.bucketname=guli-edu-avatar-2020

要注意一點，由于上述配置文件中不需要配置數據庫相關內容，啟動時會報錯，因此下面 @SpringBootApplication 注解中要加上 exclude = DataSourceAutoConfiguration.class

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class) @ComponentScan(basePackages = {"com.atguigu"}) public class OssApplication {public static void main(String[] args) {SpringApplication.run(OssApplication.class, args);} }

2. 后臺上傳代碼

（1）獲取配置文件中的 OSS 各項值；

配置文件中的值可以通過 @Value(${xxx}) 注解進行獲取，創建一個Util類專門用于獲取配置文件中的值。但由于此時值是 private 的，所以需要將其賦值給一個public 對象。可以實現 InitializingBean 接口中的 afterPropertiesSet 方法，它在項目啟動時，獲取到值后即被調用。

注意這里不能直接定義 public 對象，再在它的上面加@Value注解，值會取不到。

@Component public class ConstantPropertiesUtil implements InitializingBean {@Value("${aliyun.oss.file.endpoint}")private String endPoint;@Value("${aliyun.oss.file.keyid}")private String keyId;@Value("${aliyun.oss.file.keysecret}")private String keySecret;@Value("${aliyun.oss.file.bucketname}")private String bucketName;public static String END_POINT;public static String KEY_ID;public static String KEY_SECRET;public static String BUCKET_NAME;@Overridepublic void afterPropertiesSet() throws Exception {END_POINT = endPoint;KEY_ID = keyId;KEY_SECRET = keySecret;BUCKET_NAME = bucketName;} }

（2）創建 controler 和 service 類

我們是先創建了一個 service 接口，再創建了它的一個實現類，

controller中的注入可以注入接口，也可以注入具體的實現類。（當有多個實現類時只能注入實現類，否則會報錯有多個 bean 是 OssService 類型）：

@Autowired private OssService ossService;

但是接口中只定義了方法：

public interface OssService {String uploadAvatar(MultipartFile file); }

真正實現以及 @Service 注解都是在實現類上：

@Service public class OssServiceImpl implements OssService {@Overridepublic String uploadAvatar(MultipartFile file) {String endPoint = ConstantPropertiesUtil.END_POINT;String bucketName = ConstantPropertiesUtil.BUCKET_NAME;String keyId = ConstantPropertiesUtil.KEY_ID;String keySecret = ConstantPropertiesUtil.KEY_SECRET;// 創建OSSClient實例。OSS ossClient = new OSSClientBuilder().build(endPoint, keyId, keySecret);try {ossClient.putObject(bucketName, file.getOriginalFilename(), file.getInputStream());// 關閉OSSClient。ossClient.shutdown();return "https://" + bucketName + "." + endPoint + "/" + file.getOriginalFilename();} catch (Exception e) {e.printStackTrace();return null;}} }

上述代碼會出現文件重名覆蓋的問題，通過修改文件名解決文件重名覆蓋問題，并按日期文件夾分類：

String fileName = file.getOriginalFilename(); //添加uuid防止文件重名 String uuid = UUID.randomUUID().toString().replaceAll("-", ""); fileName = uuid + fileName ; //添加日期，按日期創建文件夾對文件分類 String date = new DateTime().toString("yyyy/MM/dd"); fileName = date + "/" + fileName;

三. nginx 請求轉發

1. nginx 基礎概念

由于現在后端有兩個服務（eduservice 和 oss），一個在 8081，一個 8082 端口，那前端發送的請求如何被正確轉發到對應端口呢？答案是使用 **nginx **。

nginx 能夠實現：

請求轉發

負載均衡

動靜分離（將靜態的代碼文件與動態文件分開存儲）

2. 實現請求轉發

如何使用 nginx 實現請求轉發呢？

（1）首先下載 ngnix for windows，然后修改其配置文件 …\nginx-1.18.0\conf\nginx .conf：

http {server {listen 9001; //修改監聽的端口號防止沖突server_name localhost;//添加需要轉發的請求地址：~ 表示正則匹配location ~ /eduservice/ {proxy_pass http://localhost:8081;}location ~ /oss/ {proxy_pass http://localhost:8082;}} }

（2）修改前端端口號為 nginx 中配置的端口號：

（3）前端重新啟動，并啟動后端兩個服務。再啟動 nginx 。注意啟動 nginx 前最好先 stop 掉它之前的進程：

nginx -s stop

四. 頭像上傳前端代碼

1. 導入上傳文件模塊

確保 components 模塊下有這兩個模塊，沒有的話下載拷貝過來就行：

前端代碼導入模塊：

<script> //導入 import ImageCropper from '@/components/ImageCropper' import PanThumb from '@/components/PanThumb'export default {components: {ImageCropper, PanThumb} //聲明 }

2. 頭像上傳組件

<el-form-item label="頭像"><!--頭像縮略圖--><pan-thumb :image="teacherForm.avatar"/><el-button type="primary" icon="el-icon-upload" @click="imageUploadShow=true">更換頭像</el-button>//點擊上傳文件后調用的組件<image-cropperv-show="imageUploadShow":width="300":height="300":key="imageKey" //用于重新初始化組件:url="BASE_API + '/oss/fileupload/avatar'" //后端文件上傳的url地址field="file"@close="close"@crop-upload-success="cropSuccess" //上傳成功后調用的方法/> </el-form-item> data() {return {imageUploadShow: false,BASE_API: process.env.BASE_API, //從dev.env.js文件中讀取的內容imageKey: 0,} },

添加方法的定義：

close() {this.imageUploadShow = falsethis.imageKey = this.imageKey + 1 //用于重新初始化組件，防止上次成功后第二次點擊上傳出現bug }, //這是上傳成功后調用的方法，自動封裝data的內容 cropSuccess(data) {this.imageUploadShow = falsethis.teacherForm.avatar = data.urlthis.imageKey = this.imageKey + 1 }

五. EasyExcel的使用

后續內容要用到 EasyExcel，這里先介紹下如何使用EasyExcel進行讀寫。

1. 引入 pom 依賴

<dependencies><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.1</version></dependency> </dependencies>

注意：其實還需要引入 poi 依賴，前面已經引入過了。

2. 寫操作

建立一個實體類，用 @ExcelProperty 注解標識它在 excel 表中的列名

@Data public class EasyExcelEntity {@ExcelProperty(value = "學生編號", index = 0)private Integer sno;@ExcelProperty(value = "學生姓名", index = 1)private String sname; }

寫操作：

String fileName = "D:\\stu.xlsx"; List<EasyExcelEntity> stuList = new ArrayList<>(); for (int i = 0; i < 10; i++) {EasyExcelEntity entity = new EasyExcelEntity();entity.setSno(i);entity.setSname("hi" + i);stuList.add(entity); } EasyExcel.write(fileName, EasyExcelEntity.class).sheet("學生列表").doWrite(stuList);

3. 讀操作

同樣需要上述一個實體類對應 excel 表中的列名，此外比 “寫操作” 更麻煩一點的是需要建立一個監聽器：

public class EasyExcelListener extends AnalysisEventListener<EasyExcelEntity> {//一行一行讀取代碼時進行的操作@Overridepublic void invoke(EasyExcelEntity easyExcelEntity, AnalysisContext analysisContext) {System.out.println(easyExcelEntity.getSno() + ": " + easyExcelEntity.getSname());}//讀取完進行的操作@Overridepublic void doAfterAllAnalysed(AnalysisContext analysisContext) {} }

讀操作：

EasyExcel.read(fileName, EasyExcelEntity.class, new EasyExcelListener()).sheet().doRead();

總結

以上是生活随笔為你收集整理的Day6 - 头像存储与EasyExcel的全部內容，希望文章能夠幫你解決所遇到的問題。

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