碼上歡樂
相關內容    簡體    繁體

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

本文轉載自   查看原文   2020-04-10 10:04   2837    開發工具/ 框架

 

 

文章地址：

https://www.pianshen.com/article/6994379628/

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

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

Bucket

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

Bucket相關信息

2.2 管理文件

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

管理文件

2.3 阿里雲OSS文檔

阿里雲OSS文檔

阿里雲OSS文檔

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

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

3. 項目初始化

3.1 創建SpringBoot項目

在Idea中File——>New——>Project
創建SpringBoot項目 步驟一

創建SpringBoot項目 步驟二

創建SpringBoot項目 步驟三

創建SpringBoot項目 步驟四

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

3.3 安裝lombok插件

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

安裝lombok插件

然后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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

bucketName、endpoint與urlPrefix

accessKeyId、accessKeySecret需要在accesskeys里面查看

accesskeys與accessKeySecret

在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 gaojun56@163.com */
@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);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

4.2 后端業務

4.2.1 vo

該實體類用於后台返回給前台。

package com.example.ossdemo.vo;

import lombok.Data;

/** * @author lastwhisper * @desc 用於前后端交互的返回值 * @email gaojun56@163.com */
@Data
public class FileUploadResult {
    // 文件唯一標識
    private String uid;
    // 文件名
    private String name;
    // 狀態有：uploading done error removed
    private String status;
    // 服務端響應內容，如：'{"status": "success"}'
    private String response;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

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 gaojun56@163.com */
@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 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, 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 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();
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146

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 gaojun56@163.com */
@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);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

效果展示：

ajax文件上傳到OSS

ajax文件上傳到OSS

ajax文件上傳到OSS成功

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

效果展示：

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

文件管理

單擊頁面即可下載圖片

image.png

雙擊即可刪除圖片：

刪除圖片

刪除圖片


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 SpringBoot整合阿里雲OSS對象存儲實現文件上傳 上傳文件到阿里雲oss並下載 SpringBoot整合阿里雲OSS Python 阿里雲OSS文件上傳下載與文件刪除及檢索示例 JAVA整合阿里雲OSS實現文件上傳功能 SpringBoot + Vue + ElementUI 實現后台管理系統模板 -- 后端篇（三）： 整合阿里雲 OSS 服務 -- 上傳、下載文件、圖片 SpringBoot + Vue + ElementUI 實現后台管理系統模板 -- 后端篇（三）： 整合阿里雲 OSS 服務 -- 上傳、下載文件、圖片 上傳文件到阿里雲OSS 關於文件上傳阿里雲Oss OSS上傳文件到阿里雲
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM