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

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后,即可看到对应的信息,如:url、消耗流量等

在这里插入图片描述

2.2 管理文件

可以通过在线的方式进行管理文件

管理文件

2.3 阿里云OSS文档

阿里云OSS文档

阿里云OSS文档

右侧的开发指南说的更加详细
在这里插入图片描述

阿里云虽然提供了完整的文档,但是做一个完整的前后端交互的文件上传、下载、查看、删除等操作,对于小白来说还是有点难度的,所以我把自己学习OSS的步骤以及代码分享了出来,共有需要的人使用。

3. 项目初始化

3.1 创建SpringBoot项目

在Idea中File——>New——>Project
在这里插入图片描述

创建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>

3.3 安装lombok插件

因为项目中使用了lombok的@Data注解,当然你也可以自己写get、set等方法。
File——>settings——>Plugins
安装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

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

bucketName、endpoint与urlPrefix

accessKeyId、accessKeySecret需要在accesskeys里面查看

在这里插入图片描述

在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*/
@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;@Beanpublic OSS oSSClient() {return new OSSClient(endpoint, accessKeyId, accessKeySecret);}
}

4.2 后端业务

4.2.1 vo

该实体类用于后台返回给前台。

package com.example.ossdemo.vo;import lombok.Data;/*** @desc 用于前后端交互的返回值*/
@Data
public class FileUploadResult {// 文件唯一标识private String uid;// 文件名private String name;// 状态有:uploading done error removedprivate String status;// 服务端响应内容,如:'{"status": "success"}'private String response;
}

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;/*** @desc*/
@Service
public class FileUploadService {// 允许上传的格式private static final String[] IMAGE_TYPE = new String[]{".bmp", ".jpg",".jpeg", ".gif", ".png"};@Autowiredprivate OSS ossClient;@Autowiredprivate 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, newByteArrayInputStream(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();}}
}

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;/*** @desc*/
@Controller
public class FileUploadController {@Autowiredprivate FileUploadService fileUploadService;/*** @desc 文件上传到oss* @return FileUploadResult* @Param uploadFile*/@RequestMapping("file/upload")@ResponseBodypublic 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* @Param objectName*/@RequestMapping("file/delete")@ResponseBodypublic 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")@ResponseBodypublic List<OSSObjectSummary> list()throws Exception {return this.fileUploadService.list();}/*** @author lastwhisper* @desc 根据文件名下载oss上的文件* @return* @Param objectName*/@RequestMapping("file/download")@ResponseBodypublic 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);}
}

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>

效果展示:

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>

效果展示:

刚才上传了一张照片,可以立马看到

文件管理

单击页面即可下载图片

在这里插入图片描述

双击即可删除图片:

删除图片

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/556157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js 继承发展史

一、传统模式 – 利用原型链 Grand.prototype.lastName 王五; function Grand() {} var grand new Grand();Father.prototype grand; function Father() {this.name 李四 } var father new Father();Son.prototype father; function Son() {} var son new Son(); conso…

vue 调用webservice_js跨域调用WebService的简单实例

步骤1. 在web.config中的system.web节点里加入步骤2.webservice代码using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using System.Web.Mvc;namespace WebService{/// /// WebService1 的摘要说明/// [WebServic…

SpringBoot整合oss实现文件的上传,查看,删除,下载

springboot整合oss实现文件的上传,查看,删除,下载 1.什么是对象存储 OSS? 答&#xff1a;阿里云对象存储服务&#xff08;Object Storage Service&#xff0c;简称 OSS&#xff09;&#xff0c;是阿里云提供的海量、安全、低成本、高可靠的云存储服务。其数据设计持久性不低…

属性的表示方法和对象的枚举

对象 一、对象.属性 var obj {name : mary,age : 18 };console.log(obj.name, obj.age); // mary 18二、对象[‘属性’] – 让对象属性更加灵活 var zhang {wife1: {name: xiaomei},wife2: {name: xiaoli},wife3: {name: xiaowang},wife4: {name: xiaoxiao},sayWife: funct…

docker 启动成功但无法访问_docker nginx 运行后无法访问的问题解决

## 1最近在学docker部署&#xff0c;一开始打算将nginx先docker化的。对照官方的docker镜像介绍说明&#xff0c;进行自定义配置将官方的nginx.conf复制出来后&#xff0c;修改添加了一些自定义&#xff0c;主要是屏蔽了default.conf&#xff0c;以及include文件夹 sites-avail…

minio实现文件上传下载和删除功能

前言 之前用到文件上传功能&#xff0c;在这里做个学习记录。使用minio实现&#xff0c;后面会记录使用fastdfs和阿里云的oss实现文件上传以及他们的比较&#xff08;oss根据流量收费&#xff09;。minio的中文文档&#xff1a;https://docs.min.io/cn/ minio安装 首先查询d…

ES6 let 和 const 关键字

一、ES5 的 var 关键字 var 存在变量提升var 允许重复声明&#xff0c;浏览器本身只识别一次&#xff0c;但不会报错var 声明的变量即是全局变量&#xff0c;也相当于给 GO(window) 设置了一个属性而且两者建立映射机制基于 typeof 检测一个没有被声明过的变量&#xff0c;并不…

Spring Boot配置MinIO(实现文件上传、下载、删除)

1 MinIO MinIO 是一个基于Apache License v2.0开源协议的对象存储服务。它兼容亚马逊S3云存储服务接口&#xff0c;非常适合于存储大容量非结构化的数据&#xff0c;例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等&#xff0c;而一个对象文件可以是任意大小&#xff…

js 里面令人头疼的 this

JS中this相关问题梳理 this 就是 js 里的关键字&#xff0c;有特殊意义&#xff0c;代表函数执行主体 一、定义 函数执行主体&#xff08;不是作用域&#xff09;&#xff1a;意思是谁把函数执行了&#xff0c;那么执行主体就是谁 二、使用情况 全局作用域里的this 是window…

大数据专业考研书_考研必知大数据(完整版)

由上面的两组图表&#xff0c;不难看出&#xff0c;历史和医学的读研比例遥遥领先。另外由图可知&#xff0c;全国有百分之十三的本科生选择了毕业后读研&#xff0c;而这其中有近三成的人是选择了在读研时转换专业。部分省份报名人数汇总结合历年报考人数统计数据来看&#xf…

Java8 stream().map()将对象转换为其他对象

Java8 stream().map()将对象转换为其他对象 1: 将对象List转为List public class user{private String name;private String password;private String address;private String age;}List<String> name user.stream().map(x -> x.getName()).collect(Collectors.toLi…

改变 this 指向的 call 和 apply

一、call 方法 基本用法 function test() {console.log(hello world); } test(); // hello world test.call(); // hello world // test() > test.call()其实就是借用别人的方法&#xff0c;来实现自己的功能 function Person(name, age) {// this objthis.name name;th…

python爬去百度百科词条_python简单爬虫爬取百度百科python词条网页

目标分析&#xff1a;目标&#xff1a;百度百科python词条相关词条网页 - 标题和简介入口页&#xff1a;https://baike.baidu.com/item/Python/407313URL格式&#xff1a;- 词条页面URL&#xff1a;/item/xxxx数据格式&#xff1a;- 标题&#xff1a;***- 简介&#xff1a;***页…

Stream中toMap引发NullPointerException____Stream的执行流程

Stream中toMap引发NullPointerException 1、引发NullPointerException的代码如下&#xff1a; List<SelfSettlementCardInfoDto> selfSettlementCardInfoDtos selfCardAdapterManager.listSelfSettlementCardInfoDtoByCardIds(queryDto.getPartnerId(), cardIds, false…

db2 最大分区数_db2 查询表分区数据库

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

ES6 Symbol 数据类型

ES6-Symbol 类型 ES5 除类数组对象&#xff08;类数组对象名可以为数字&#xff0c;对象必须有 length 属性&#xff0c;可以用数组下标的方式访问对象属性&#xff0c;但不能通过点的方式访问&#xff09;外&#xff0c;对象属性名都是字符串&#xff0c;这很容易造成属性名的…

word中图片为嵌入式格式时显示不全_图片在word中显示不全怎么处理_word图片显示不全怎么办-win7之家...

我们在编辑word文档时&#xff0c;会需要插入一些图片来做为装饰或者用来标识&#xff0c;也会出现插入的图片显示不全的情况&#xff0c;要是遇到这种情况该怎么办&#xff0c;那么图片在word中显示不全要怎么处理呢&#xff0c;下面小编给大家分享图片在word中显示不全的解决…

Map集合使用get方法返回null抛出空指针异常问题

Map集合使用get方法空指针异常问题 前言 1.Map里面只能存放对象&#xff0c;不能存放基本类型&#xff0c;例如int&#xff0c;需要使用Integer 2.Map集合取出时&#xff0c;如果变量声明了类型&#xff0c;会先进行拆箱&#xff0c;再进行转换。 空指针问题 如图&#xff…

ES6 扩展运算符

ES6 数组相关 一、扩展运算符 … 用于函数调用 将一个数组变为参数序列&#xff1b;可与正常的函数参数结合使用&#xff1b;扩展运算符后面也可以放表达式&#xff1b;如果扩展运算符后面是空数组&#xff0c;不产生任何结果。只有函数调用时&#xff0c;扩展运算符才可以放…

android gone动画_Android动画之淡入淡出

为了更好的说明Android动画的淡入淡出效果&#xff0c;这里以一个场景为例&#xff1a; 界面上有两个View 控件&#xff0c;两个View交替显示&#xff0c;当一个View淡入显示&#xff0c;另一个View淡出不可见。我们把当前要显示的View叫showView, 要隐藏不可见的view叫hideVie…