SpringBoot整合阿里云OSS文件上传、下载、查看、删除
1. 开发前准备
1.1 前置知识
java基础以及SpringBoot简单基础知识即可。
1.2 环境参数
- 开发工具:IDEA
- 基础环境:Maven+JDK8
- 所用技术:SpringBoot、lombok、阿里云OSS存储服务
SpringBoot版本:2.1.4
1.3 你能学到什么
- OSS简介,以及阿里云OSS控制台快速入门使用
- SpringBoot 整合 阿里云OSS 存储服务,进行文件上传、下载、查看、删除
- 阿里云OSS文档介绍,以及快速入门使用
- lombak入门使用以及IDEA lombak插件安装
- 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/
在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 gaojun
* @email 15037584397@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);
}
}
4.2 后端业务
4.2.1 vo
package com.example.ossdemo.vo;
import lombok.Data;
/**
* @author gaojun
* @desc 用于前后端交互的返回值
* @email 15037584397@163.com
*/
@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
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 gaojun
* @desc
* @email 15037584397@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 gaojun
* @desc 文件上传
* 文档链接 https://help.aliyun.com/document_detail/84781.html?spm=a2c4g.11186623.6.749.11987a7dRYVSzn
* @email 15037584397@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 gaojun
* @desc 生成路径以及文件名 例如://images/2019/04/28/15564277465972939.jpg
* @email 15037584397@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 gaojun
* @desc 查看文件列表
* 文档链接 https://help.aliyun.com/document_detail/84841.html?spm=a2c4g.11186623.2.13.3ad5b5ddqxWWRu#concept-84841-zh
* @email 15037584397@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 gaojun
* @desc 删除文件
* 文档链接 https://help.aliyun.com/document_detail/84842.html?spm=a2c4g.11186623.6.770.4f9474b4UYlCtr
* @email 15037584397@163.com
*/
public FileUploadResult delete(String objectName) {
ossClient.deleteObject(aliyunConfig.getBucketName(), objectName);
FileUploadResult fileUploadResult = new FileUploadResult();
fileUploadResult.setName(objectName);
fileUploadResult.setStatus("removed");
fileUploadResult.setResponse("success");
return fileUploadResult;
}
/**
* @author gaojun
* @desc 下载文件
* 文档链接 https://help.aliyun.com/document_detail/84823.html?spm=a2c4g.11186623.2.7.37836e84ZIuZaC#concept-84823-zh
* @email 15037584397@163.com
*/
public InputStream exportOssFile(String objectName) {
// ossObject包含文件所在的存储空间名称、文件名称、文件元信息以及一个输入流。
OSSObject ossObject = ossClient.getObject(aliyunConfig.getBucketName(), objectName);
// 读取文件内容。
InputStream is = ossObject.getObjectContent();
return is;
}
}
4.2.3 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 java.io.IOException;
import java.io.InputStream;
import java.util.List;
/**
* @author gaojun
* @desc
* @email 15037584397@163.com
*/
@Controller
public class FileUploadController {
@Autowired
private FileUploadService fileUploadService;
/**
* @author gaojun
* @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 gaojun
* @Param objectName
*/
@RequestMapping("file/delete")
@ResponseBody
public FileUploadResult delete(@RequestParam("fileName") String objectName)
throws Exception {
return this.fileUploadService.delete(objectName);
}
/**
* @author gaojun
* @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 gaojun
* @desc 根据文件名下载oss上的文件
* http://localhost:8080/file/delete
* @return ResponseEntity<byte[]>
* @Param objectName
*/
@RequestMapping("file/download")
@ResponseBody
public ResponseEntity<byte[]> download(@RequestParam("fileName") String objectName) throws IOException {
HttpHeaders headers = new HttpHeaders();
// 以流的形式下载文件,这样可以实现任意格式的文件下载
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
// 文件名包含中文时乱码问题
// headers.setContentDispositionFormData("attachment", new String(exportFile.getName().getBytes("utf-8"), "ISO8859-1"));
headers.setContentDispositionFormData("attachment", objectName);
InputStream is = this.fileUploadService.exportOssFile(objectName);
return new ResponseEntity<byte[]>(is.toString().getBytes(),
headers, HttpStatus.CREATED);
}
}
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" 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文件上传、下载、查看、删除的更多相关文章
- Thinkphp整合阿里云OSS图片上传实例
Thinkphp3.2整合阿里云OSS图片上传实例,图片上传至OSS可减少服务器压力,节省宽带,安全又稳定,阿里云OSS对于做负载均衡非常方便,不用传到各个服务器了 首先引入阿里云OSS类库 < ...
- 构建基于阿里云OSS文件上传服务
转载请注明来源:http://blog.csdn.net/loongshawn/article/details/50710132 <构建基于阿里云OSS文件上传服务> <构建基于OS ...
- 记一次阿里云oss文件上传服务假死
引言 记得以前刚开始学习web项目的时候,经常涉及到需要上传图片啥的,那时候都是把图片上传到当前项目文件夹下面,每次项目一重启图片就丢了.虽然可以通过修改/tomcat/conf/server.xml ...
- PHP实现阿里云OSS文件上传(支持批量)
上传文件至阿里云OSS,整体逻辑是,文件先临时上传到本地,然后在上传到OSS,最后删除本地的临时文件(也可以不删,具体看自己的业务需求),具体实现流程如下: 1.下载阿里云OSS对象上传SDK(P ...
- php阿里云oss文件上传
php的文件上传 文件上传 php的文件上传放在了$_FILES数组里,单文件和多文件上传的区别在于$_FILES['userfile']['name']是否为数组, 不熟悉的可以读一下官方文档 单文 ...
- 阿里云OSS文件上传封装
1.先用composer安装阿里云OSS的PHPSDK 2.配置文件里定义阿里云OSS的秘钥 3.在index控制器里的代码封装 <?php namespace app\index\contro ...
- 记录-阿里云Oss文件上传
public class OssUtil { /** * 上传图片 * @param file * @param request * @return */ public static Map<S ...
- Java 客户端操作 FastDFS 实现文件上传下载替换删除
FastDFS 的作者余庆先生已经为我们开发好了 Java 对应的 SDK.这里需要解释一下:作者余庆并没有及时更新最新的 Java SDK 至 Maven 中央仓库,目前中央仓库最新版仍旧是 1.2 ...
- SpringBoot完美配置阿里云的文件上传
新建一个config类 AliyunOSS.java @Configuration @Data public class AliyunOSS { private OSSClient ossClient ...
随机推荐
- Vue components Cannot read property '__ob__' of undefined
在Vue开发过程中,子组件向父组件传值的过程中,函数时可以对应的触发的,但是当父组件要改变自己的属性的时候报错了. 具体的页面逻辑是这样的,父组件 子组件 点击了之后没有问题,子组件向父组件传值 t ...
- Git - git status - 查看当前仓库状态
索引: 目录索引 参看代码 GitHub: git.txt 一.示例: git status 二.说明: 1."status" 部分 该命令可以查出当前分支文件变更状态, 可以查出 ...
- c/c++ 模板函数的重载
模板函数的重载 普通函数可以重载,模板函数也可以重载,但规则复杂 有下面2个函数,名字相同,返回值相同就,参数不同,符合重载. template<typename T> std::stri ...
- 一。Hibernate 开发流程
一.hibernate和mybatis都是orm产品1.orm:object-realation-mapping对象关系映射 二.开发步骤1.导入相关jar 包括hibernate和oracle的驱动 ...
- Nmon实时监控并生成HTML监控报告
前面的博客介绍了服务端监控工具:Nmon使用方法,最近在github找到了一个nmon自动监控并生成HTML格式报告的工具:easyNmon,使用体验蛮不错的,这里介绍下它的安装及使用方法. 一.关于 ...
- 我一个二本大学是如何拿到百度、网易大厂offer的!
本文首发在我的微信公众号“程序员柯南”,底部附有二维码.原文阅读 01终于步入大学 我既没有跨过山和大海,也没有穿过人山人海,我就是我,一个2020届普通本科大学生.身为读者的你,关注了我,自然是想获 ...
- Dom 动态添加元素节点总结
jQuery创建元素节点的方法: 创建元素节点: $("<div></div>"): 创建文本节点: $("<div>直接将文本的内容 ...
- 手动安装Package Control
手动下载一个package control的包:https://github.com/wbond/package_control 然后Download ZIP后,解压,将解压后的文件夹重命名为 Pac ...
- 【刷题】牛客网看到的鹅厂ML面筋-部分问题RecSys相关
昨天下午六点半的电话面试,其实我已经有了一个不错的实习offer ,不是特别想去腾讯了,没有太怎么准备,接的电话. 整个面试15分钟,开始就是自我介绍,接着问项目,和上一段百度实习经历.问题大致如下: ...
- 二 Array 数组常用操作方法
数组链接 Array 构造上的方法 一.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable) ...