关于java:SpringBoot-整合阿里云OSS文件上传下载查看删除

OSS 简介，以及阿里云 OSS 控制台疾速入门应用
SpringBoot 整合阿里云 OSS 存储服务，进行文件上传、下载、查看、删除
阿里云 OSS 文档介绍，以及疾速入门应用
lombok 入门应用以及 IDEA lombok 插件装置
SpringMVC 与 AJAX 前后端拆散交互
AJAX 文件异步上传

开发工具：IDEA
根底环境：Maven + JDK8
所用技术：SpringBoot、lombok、阿里云 OSS 存储服务
SpringBoot 版本：2.4.5

1、创立 Bucket

应用 OSS，首先须要创立 Bucket，Bucket 翻译成中文是水桶的意思，把存储的图片资源看做是水，想要盛水必须得有桶。
进入控制台，https://oss.console.aliyun.co…

点击创立 Bucket

创立实现后，Bucket 列表中能够看到曾经创立好的 Bucket，点击后能够查看以后 Bucket 的概览：

2、管理文件

能够通过在线的形式进行文件的治理

3、阿里云 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

关于java:SpringBoot-整合阿里云OSS文件上传下载查看删除

SpringBoot 整合阿里云 OSS 文件上传、下载、查看、删除

根本信息

波及知识点

我的项目详解

开发前筹备

应用阿里云 OSS

1、创立 Bucket

2、管理文件

3、阿里云 OSS 文档

我的项目初始化

创立 SpringBoot 我的项目

Maven 依赖

IDEA 装置 lombok 插件（略）

后端服务编写

阿里云 OSS 配置

配置类代码

后端业务代码

common

service

controller

前端页面编写与测试

文件上传页面 upload.html

文件治理页面 manager.html

源码参考

Just My Socks（注册教程内含优惠码）

关于java:SpringBoot-整合阿里云OSS文件上传下载查看删除

SpringBoot 整合阿里云 OSS 文件上传、下载、查看、删除

根本信息

波及知识点

我的项目详解

开发前筹备

应用阿里云 OSS

1、创立 Bucket

2、管理文件

3、阿里云 OSS 文档

我的项目初始化

创立 SpringBoot 我的项目

Maven 依赖

IDEA 装置 lombok 插件（略）

后端服务编写

阿里云 OSS 配置

配置类代码

后端业务代码

common

service

controller

前端页面编写与测试

文件上传页面 upload.html

文件治理页面 manager.html

源码参考

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）