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

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

基本信息

涉及知識點

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

項目詳解

開發前準備

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

使用阿里雲OSS

一、建立Bucket

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

點擊建立 Bucket

建立完成後，Bucket 列表中能夠看到已經建立好的 Bucket，點擊後能夠查看當前 Bucket 的概覽：

二、管理文件

能夠經過在線的方式進行文件的管理

三、阿里雲OSS文檔

阿里雲提供了比較詳細的開發文檔供使用者參考：

項目初始化

建立 SpringBoot 項目

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>

IDEA 安裝 lombok 插件（略）

後端服務編寫

阿里雲OSS配置

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

aliyun.endpoint=oss-cn-beijing.aliyuncs.com
aliyun.accessKeyId=LTAI5t9mpendCkALZKtBcqW1
aliyun.accessKeySecret=XXX（你的accessKeySecret）
aliyun.bucketName=malf-bucket
aliyun.urlPrefix=https://malf-bucket.oss-cn-beijing.aliyuncs.com/
spring.servlet.multipart.max-file-size=100MB
spring.servlet.multipart.max-request-size=1000MB

endpoint、bucketName、urlPrefix 在OSS概覽頁面就能夠看到；
accessKeyId、accessKeySecret 須要在 Access Key 裏面查看。

配置類代碼

package com.malf.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;

/**
 * @author 巔峯小詞典
 * @description
 * @date 2021/5/20
 * @project springboot_oss
 */
@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);
    }
    
}

後端業務代碼

common

package com.malf.common;

import lombok.Data;

/**
 * @author 巔峯小詞典
 * @description 用於先後端交互的返回值
 * @date 2021/5/20
 * @project springboot_oss
 */
@Data
public class FileUploadResult {

    // 文件惟一標識
    private String uid;
    // 文件名
    private String name;
    // 狀態有：uploading done error removed
    private String status;
    // 服務端響應內容，如：'{"status": "success"}'
    private String response;

}

service

package com.malf.service;

import com.aliyun.oss.OSS;
import com.aliyun.oss.model.ListObjectsRequest;
import com.aliyun.oss.model.OSSObject;
import com.aliyun.oss.model.OSSObjectSummary;
import com.aliyun.oss.model.ObjectListing;
import com.malf.common.FileUploadResult;
import com.malf.config.AliyunConfig;
import org.apache.commons.lang3.RandomUtils;
import org.apache.commons.lang3.StringUtils;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import java.io.*;
import java.util.List;

/**
 * @author 巔峯小詞典
 * @description 使用ossClient操做阿里雲OSS，進行上傳、下載、刪除、查看全部文件等操做，同時能夠將圖片的url進行入庫操做。
 * @date 2021/5/20
 * @project springboot_oss
 */
@Service
public class FileUploadService {

    // 容許上傳的格式
    private static final String[] IMAGE_TYPE = new String[]{".bmp", ".jpg", ".jpeg", ".gif", ".png"};

    @Resource
    private OSS ossClient;
    @Resource
    private AliyunConfig aliyunConfig;

    /**
     * 文件上傳
     *
     * @param uploadFile
     * @return
     */
    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");
        // 文件路徑須要保存到數據庫
        fileUploadResult.setName(this.aliyunConfig.getUrlPrefix() + filePath);
        fileUploadResult.setUid(String.valueOf(System.currentTimeMillis()));
        return fileUploadResult;
    }

    /**
     * 生成路徑以及文件名
     *
     * @param sourceFileName
     * @return
     */
    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, ".");
    }

    /**
     * 查看文件列表
     *
     * @return
     */
    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;
    }

    /**
     * 刪除文件
     *
     * @param objectName
     * @return
     */
    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;
    }

    /**
     * 下載文件
     *
     * @param os
     * @param objectName
     * @throws IOException
     */
    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();
        }
    }

}

controller

package com.malf.controller;

import com.aliyun.oss.model.OSSObjectSummary;
import com.malf.common.FileUploadResult;
import com.malf.service.FileUploadService;
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.annotation.Resource;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
 * @author 巔峯小詞典
 * @description
 * @date 2021/5/20
 * @project springboot_oss
 */
@Controller
public class FileUploadController {

    @Resource
    private FileUploadService fileUploadService;

    @RequestMapping("file/upload")
    @ResponseBody
    public FileUploadResult upload(@RequestParam("file") MultipartFile uploadFile) throws Exception {
        return this.fileUploadService.upload(uploadFile);
    }

    @RequestMapping("file/delete")
    @ResponseBody
    public FileUploadResult delete(@RequestParam("fileName") String objectName) throws Exception {
        return this.fileUploadService.delete(objectName);
    }

    @RequestMapping("file/list")
    @ResponseBody
    public List<OSSObjectSummary> list() throws Exception {
        return this.fileUploadService.list();
    }

    @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);
    }

}

前端頁面編寫與測試

文件上傳頁面 upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oss文件上傳</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.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>

效果展現：

文件管理頁面 manager.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oss文件管理</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        var pre = 'https://malf-bucket.oss-cn-beijing.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" ondblclick="deletefile(this.src)" onclick="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文件上傳、下載、查看、刪除的基本框架就搭建成功了。

源碼參考

springboot_oss