阿里云OSS对象存储服务

准备工作

1、在service模块新建子模块service_oss

2、引入pom.xml文件中引入oss服务依赖

 <dependencies>
<!--aliyunOSS-->
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
</dependency> <!-- 日期工具栏依赖 -->
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
</dependency> </dependencies>

后台上传开发

1、在配置文件application.properties中配置阿里云

#服务端口
server.port=8003
#服务名
spring.application.name=service-oss #环境设置:dev、test、prod
spring.profiles.active=dev # nacos服务地址
#spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848 #阿里云 OSS
#不同的服务器,地址不同
aliyun.oss.file.endpoint=oss-cn-beijing.aliyuncs.com
aliyun.oss.file.keyid=LTAI4GFzTBo3LTCyo1wLA1Ys
aliyun.oss.file.keysecret=EAcieIxjX84Yr3TCvXX3LG95JNSWnS
#bucket可以在控制台创建,也可以使用java代码创建
aliyun.oss.file.bucketname=edu-bi

2、启动类配置

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@ComponentScan(basePackages = {"com.birdy"})
public class OssApplication {
public static void main(String[] args) {
SpringApplication.run(OssApplication.class);
}
}

exclude = DataSourceAutoConfiguration.class: 排除数据源配置

因为oss模块不需要操作数据库,所以在application.properties配置文件中没有配置数据库,但springboot是自动加载配置,没有找到数据库配置,启动时会报错

Failed to configure a DataSource:' url’ attribute is not specif: 未能配置DataSource:“URL”属性不是指定:

Reason: Failed to determine a suitable driver class 原因:未能确定合适的驱动程序类

3、定义工具类获取配置中的数据

@Component
public class ConstantPropertiesUtils implements InitializingBean { //读取配置文件内容
@Value("${aliyun.oss.file.endpoint}")
private String endPoint; @Value("${aliyun.oss.file.keyid}")
private String keyId; @Value("${aliyun.oss.file.keysecret}")
private String keySecret; @Value("${aliyun.oss.file.bucketname}")
private String bucketName; //定义公开静态常量
public static String END_POINT;
public static String ACCESS_KEY_ID;
public static String ACCESS_KEY_SECRET;
public static String BUCKET_NAME; /*
属性初始化完成后执行该方法
*/
@Override
public void afterPropertiesSet() throws Exception {
END_POINT = endPoint;
ACCESS_KEY_ID = keyId;
ACCESS_KEY_SECRET = keySecret;
BUCKET_NAME = bucketName;
}
}

由于私有属性外界无法访问,所以要定义公共静态常量并将私有属性值赋给这些常量,才能被其他类获取

4、创建服务层接口和实现类

//service层接口
public interface OssService {
String uploadFileAvatar(MultipartFile file);
}
package com.birdy.oss.service.impl;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.birdy.oss.service.OssService;
import com.birdy.oss.utils.ConstantPropertiesUtils;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile; import java.io.InputStream;
import java.util.UUID; //实现类
@Service
public class OssServiceImpl implements OssService {
//上传头像到oss
@Override
public String uploadFileAvatar(MultipartFile file) {
// 工具类获取值
String endPoint = ConstantPropertiesUtils.END_POINT;
String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
String bucketName = ConstantPropertiesUtils.BUCKET_NAME; try {
// 1、创建OSS实例。
OSS ossClient = new OSSClientBuilder().build(endPoint, accessKeyId, accessKeySecret); // 2、获取上传文件输入流
InputStream inputStream = file.getInputStream(); // 3、获取文件名称
String fileName = file.getOriginalFilename(); //在文件名称里面添加随机值,避免文件重名,同时替换掉文件名中的"-"
String uuid = UUID.randomUUID().toString().replaceAll("-","");
// yuy76t5rew01.jpg
fileName = uuid+fileName; //把文件按照日期进行分类
String datePath = new DateTime().toString("yyyy/MM/dd");
// 2019/11/12/ewtqr313401.jpg
fileName = datePath+"/"+fileName; /*
4、调用oss方法实现上传
第一个参数 Bucket名称
第二个参数 上传到oss文件路径和文件名称 aa/bb/1.jpg
第三个参数 上传文件输入流
*/
ossClient.putObject(bucketName , fileName , inputStream); // 5、关闭OSSClient。
ossClient.shutdown(); //返回上传之后文件路径
//需要手动拼接上传到阿里云oss的路径
// https://edu-birdy.oss-cn-beijing.aliyuncs.com/gitlab头像.jpg
String url = "https://"+bucketName+"."+endPoint+"/"+fileName;
return url;
}catch(Exception e) {
e.printStackTrace();
return null;
}
}
}

5、控制层调用

@RestController
@RequestMapping("/eduoss/fileoss")
public class OssController {
@Autowired(required = false)
private OssService ossService;
//上传头像的方法
@PostMapping
public Result uploadOssFile(MultipartFile file) {
//获取上传文件 MultipartFile
//返回上传到oss的路径
String url = ossService.uploadFileAvatar(file);
return Result.ok().data("url",url);
}
}

前端整合上传头像

准备

config文件夹下的dev.env.js文件中添加nginx代理端口

 'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env') module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
// BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
BASE_API: '"http://localhost:9001"',
OSS_PATH: '"https://guli-file.oss-cn-beijing.aliyuncs.com"'
})

1、导入组件模板

在组件模板中导入上传头像组件ImageCropperPanThumbvue-admin-template后台管理模板精简版没有该组件,完整版有,本次使用的是精简版,需要从完成版拷过来)

2、引入模板组件

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb' export default {
components: {ImageCropper, PanThumb}
}
</script>

3、使用

<el-form-item label="讲师头像">

    <!-- 使用PanThumb组件,头衔缩略图 -->
<pan-thumb :image="teacher.avatar"/>
<!-- 文件上传按钮 -->
<el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
</el-button> <!--
v-show:是否显示上传组件
:key:类似于id,如果一个页面多个图片上传控件,可以做区分
:url:后台上传的url地址
@close:关闭上传组件
@crop-upload-success:上传成功后的回调
<input type="file" name="file"/>
-->
<image-cropper
v-show="imagecropperShow"
:width="300"
:height="300"
:key="imagecropperKey"
:url="BASE_API+'/eduoss/fileoss'"
field="file"
@close="close"
@crop-upload-success="cropSuccess"/>
</el-form-item> <el-form-item>
<el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
</el-form-item>
export default {
components: {ImageCropper, PanThumb},
data() {
return {
teacher:{
name: '',
sort: 0,
level: 1,
career: '',
intro: '',
avatar: ''
}, //上传弹框组件是否显示
imagecropperShow:false,
imagecropperKey:0,//上传组件key值
BASE_API:process.env.BASE_API, //获取dev.env.js里面地址
saveBtnDisabled:false // 保存按钮是否禁用,
}
},
methods:{
close() { //关闭上传弹框的方法
this.imagecropperShow=false
//上传组件初始化
this.imagecropperKey = this.imag,cropperKey+1
},
//上传成功方法
cropSuccess(data) {
this.imagecropperShow=false
//上传之后接口返回图片地址
this.teacher.avatar = data.url
this.imagecropperKey = this.imagecropperKey+1
}
}

谷粒 | 10 | 阿里云OSS存储对象服务的更多相关文章

  1. Laravel 使用阿里云 oss 存储对象

    一.下载安装 composer require jacobcyl/ali-oss-storage 二.注册服务提供者 在config/app.php的providers下添加: //阿里云OSS对象存 ...

  2. 前端(react)上传到阿里云OSS存储 实例

    需求背景 由于现有的后台管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出直接从前端上传视频或者其他文件到阿里云OSS存储. 阿里云OSS 阿里云OSS文档介绍,这里不做过多赘述 安装 原本 ...

  3. php将图片存储在阿里云oss存储上

    创建两个方法 1.上传方法 use OSS\OssClient; use think\Config; use OSS\Core\OssException; /** * 存储文件 * * @param ...

  4. 备份MySQL数据库并上传到阿里云OSS存储

    1. 环境配置 要将本地文件上传到阿里云oss中, 必须使用阿里云提供的工具 ossutil, 有32位,也有64位的, Linux和Windows都有.具体可以到阿里云官网下载 官网及文档: htt ...

  5. 云-阿里云-OSS:对象存储 OSS

    ylbtech-云-阿里云-OSS:对象存储 OSS 对象存储服务(Object Storage Service,OSS)是一种海量.安全.低成本.高可靠的云存储服务,适合存放任意类型的文件.容量和处 ...

  6. 阿里云OSS存储开发(一)

    Step 1. 初始化一个OSSClient OSSClient是与OSS服务交互的客户端,SDK的OSS操作都是通过OSSClient完成的. 下面代码新建了一个OSSClient: using A ...

  7. 阿里云OSS存储

    1.accessKeyId 与 accessKeySecret 是由系统分配给用户的,称为ID对,用于标识用户,为访问OSS做签名验证. 2.Bucket是OSS上的命名空间,相当于数据的容器,可以存 ...

  8. Java项目接入阿里云OSS存储

    需求背景 目前公司内部项目所支持的文件云存储方式还是公司内部项目组提供的方案,但在时间的考验之下,弊端显现,尤其是灾备切换过程中需要切换访问地址,这种操作不方便,更可能因为中间过程的失误导致资源不可用 ...

  9. 阿里云OSS存储前端API上传(签名上传)

    一.创建用户 在阿里云创建用户https://ram.console.aliyun.com/users,并勾选Open API 保存好信息,很重要,返回后就再也找不到了 新增授权(这里视个人情况,需要 ...

随机推荐

  1. Python Software Foundation

    The Python Software Foundation (PSF) is a 501(c)(3) non-profit corporation that holds the intellectu ...

  2. 一凡老师亲录视频,Python从零基础到高级进阶带你飞

    如需Q群交流 群:893694563 不定时更新2-3节视频 零基础学生请点击 Python基础入门视频 如果你刚初入测试行业 如果你刚转入到测试行业 如果你想学习Python,学习自动化,搭建自动化 ...

  3. ANTLR学习(一)ANTLR简介和环境搭建

    一.ANTLR简介和学习动机 1. ANTLR简介 antlr是指可以根据输入自动生成语法树并可视化的显示出来的开源语法分析器.ANTLR-Another Tool for Language Reco ...

  4. Java - 你的 Java 代码有这些坏味道吗?

    列举一些 Java 开发中常见的"不良实践",来源于代码扫描(https://github.com/pmd/pmd),和诸君一起学习参考: 1 - 关闭资源 CloseResour ...

  5. Zookeeper的选举机制和同步机制超详细讲解,面试经常问到!

    前言 zookeeper相信大家都不陌生,很多分布式中间件都利用zk来提供分布式一致性协调的特性.dubbo官方推荐使用zk作为注册中心,zk也是hadoop和Hbase的重要组件.其他知名的开源中间 ...

  6. Linux下iptables学习笔记

    Linux下iptables学习笔记 在Centos7版本之后,防火墙应用已经由从前的iptables转变为firewall这款应用了.但是,当今绝大多数的Linux版本(特别是企业中)还是使用的6. ...

  7. Dapr + .NET Core实战(十三)跨语言开发

    因为基于Dapr的服务架构是不限语言的,我们来看看Dapr的跨语言开发.我们使用golang,python,.NET来实现跨语言的服务调用,拓扑如下 我们继续使用.NET 5的fontend和back ...

  8. 10 月 30 日 北京 LiveVideoStack 阿里云视频云专场限量赠票 100 张

    10 月 30 日 | 北京 LiveVideoStack 将携手阿里云共邀 4 位技术大咖,一同探讨从上云到创新,视频云的新技术与新场景.阿里云视频云依托阿里云服务数百万开发者的卓越服务能力与实践, ...

  9. xml文件报Element 'beans' cannot have character [children],because the type's content type is element

    写springMvc.xml文件时,偶然遇到 Element 'beans' cannot have character [children],because the type's content t ...

  10. FastAPI 学习之路(十一)请求体 - 嵌套模型

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...