基于前后端分离实现阿里云对象存储小案例
2024-05-13 21:49:30
目录
- 前端: vue
- 单文件上传组件
- http请求封装
- 后端SpringBoot
- pom
- OSS.yml配置
- Controller
- 实现效果
前端: vue
单文件上传组件
<template> <div><el-uploadaction="https://codingce-product.oss-cn-beijing.aliyuncs.com":data="dataObj"list-type="picture":multiple="false" :show-file-list="showFileList":file-list="fileList":before-upload="beforeUpload":on-remove="handleRemove":on-success="handleUploadSuccess":on-preview="handlePreview"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="fileList[0].url" alt=""></el-dialog></div>
</template>
<script>import {policy} from './policy'import { getUUID } from '@/utils'export default {name: 'singleUpload',props: {value: String},computed: {imageUrl() {return this.value;},imageName() {if (this.value != null && this.value !== '') {return this.value.substr(this.value.lastIndexOf("/") + 1);} else {return null;}},fileList() {return [{name: this.imageName,url: this.imageUrl}]},showFileList: {get: function () {return this.value !== null && this.value !== ''&& this.value!==undefined;},set: function (newValue) {}}},data() {return {dataObj: {policy: '',signature: '',key: '',ossaccessKeyId: '',dir: '',host: '',// callback:'',},dialogVisible: false};},methods: {emitInput(val) {this.$emit('input', val)},handleRemove(file, fileList) {this.emitInput('');},handlePreview(file) {this.dialogVisible = true;},beforeUpload(file) {let _self = this;return new Promise((resolve, reject) => {policy().then(response => {console.log("响应的数据",response);_self.dataObj.policy = response.data.policy;_self.dataObj.signature = response.data.signature;_self.dataObj.ossaccessKeyId = response.data.accessid;_self.dataObj.key = response.data.dir +getUUID()+'_${filename}';_self.dataObj.dir = response.data.dir;_self.dataObj.host = response.data.host;console.log("响应的数据222。。。",_self.dataObj);resolve(true)}).catch(err => {reject(false)})})},handleUploadSuccess(res, file) {console.log("上传成功...")this.showFileList = true;this.fileList.pop();this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });this.emitInput(this.fileList[0].url);}}}
</script>
<style></style>
http请求封装
import http from '@/utils/httpRequest.js'
export function policy() {return new Promise((resolve, reject) => {http({url: http.adornUrl("/thirdparty/oss/polcy"),method: "get",params: http.adornParams({})}).then(({ data }) => {resolve(data);})});
}
后端SpringBoot
导包问题请看这里:解决办法
pom
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.1.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>cn.com.codingce</groupId><artifactId>gulimall-third-party</artifactId><version>0.0.1-SNAPSHOT</version><name>gulimall-third-party</name><description>第三方服务</description><properties><java.version>1.8</java.version><spring-cloud.version>Hoxton.RELEASE</spring-cloud.version></properties><dependencies><!-- 公众项目 --><dependency><groupId>cn.com.codingce</groupId><artifactId>gulimall-common</artifactId><version>0.0.1-SNAPSHOT</version><!--排除包--><exclusions><exclusion><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--引入spring-cloud-starter-alicloud-oss--><!--导入失败，需指定为2.1.0RELEASE稳定版--><dependency><groupId>com.alibaba.cloud</groupId><!--<artifactId>aliyun-oss-spring-boot-starter</artifactId>--><artifactId>spring-cloud-starter-alicloud-oss</artifactId><version>2.1.0.RELEASE</version></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>${spring-cloud.version}</version><type>pom</type><scope>import</scope></dependency><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId><version>2.2.2.RELEASE</version><type>pom</type><scope>import</scope></dependency><dependency><groupId>com.alibaba.cloud</groupId><artifactId>aliyun-oss-spring-boot-starter</artifactId><version>1.0.0</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>
OSS.yml配置
spring:application:name: gulimall-third-partycloud:nacos:discovery:server-addr: 127.0.0.1:8848alicloud:access-key: "TAAAAAAAAAAAAAAAAAAAAAA"secret-key: "sJxQJEQBIdwadawdawdawfdawda5z"oss:endpoint: "oss-cn-beijing.aliyuncs.com"# 本没有这个属性, 自己添加bucket: "codingce-product"logging:level:cn.com.codingce: debugserver:port: 30000
Controller
package cn.com.codingce.thirdparty.controller;import cn.com.codingce.common.utils.R;
import com.aliyun.oss.OSS;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;/*** @author mxz*/
@RestController
public class OssController {@AutowiredOSS ossClient;@Value("${spring.cloud.alicloud.oss.endpoint}")private String endpoint;@Value("${spring.cloud.alicloud.oss.bucket}")private String bucket;@Value("${spring.cloud.alicloud.access-key}")private String accessId;@RequestMapping("/oss/polcy")public R polcy() {// String accessId = "<yourAccessKeyId>"; // 请填写您的AccessKeyId。// String accessKey = "<yourAccessKeySecret>"; // 请填写您的AccessKeySecret。// String endpoint = "oss-cn-hangzhou.aliyuncs.com"; // 请填写您的 endpoint。// String bucket = "codingce-product"; // 请填写您的 bucketname 。String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint// callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。//String callbackUrl = "http://88.88.88.88:8888";String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());// String dir = "user-dir-prefix/"; // 用户上传文件时指定的前缀。String dir = format + "/"; // 用户上传文件时指定的前缀。// 创建OSSClient实例。// OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);Map<String, String> respMap = null;try {long expireTime = 30;long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);// PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。PolicyConditions policyConds = new PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);byte[] binaryData = postPolicy.getBytes("utf-8");String encodedPolicy = BinaryUtil.toBase64String(binaryData);String postSignature = ossClient.calculatePostSignature(postPolicy);respMap = new LinkedHashMap<String, String>();respMap.put("accessid", accessId);respMap.put("policy", encodedPolicy);respMap.put("signature", postSignature);respMap.put("dir", dir);respMap.put("host", host);respMap.put("expire", String.valueOf(expireEndTime / 1000));// respMap.put("expire", formatISO8601Date(expiration));} catch (Exception e) {// Assert.fail(e.getMessage());System.out.println(e.getMessage());} finally {ossClient.shutdown();}return R.ok().put("data", respMap);}}
实现效果
前后端分离项目存在跨域问题
可以按照官方文档给的步骤解决
文章已上传:https://gitee.com/codingce/hexo-blog
项目地址:https://github.com/xzMhehe/codingce-java
基于前后端分离实现阿里云对象存储小案例相关推荐
- 五个问答，告诉你阿里云对象存储如何助力钉钉战胜业务洪峰
"基于OSS在弹性扩容.跨省容灾.多租户管理以及传输加速方面的基础能力,钉钉在此次战役过程中,实现了一键切换写入区域,拆分业务到多个区域的功能,同时钉钉在跨区域的图片处理.文档预览的并发处理 ...
- Python使用阿里云对象存储OSS--服务器端上传文件
一直在使用阿里云对象存储Oss,今天来总结一下基本用法,主要写个逻辑,具体操作都有详细的文档,会附链接 1 开通服务 首先需要开通oss服务以及创建存储空间,需要注意的是开通完oss服务之后默认的是 ...
- 如何结合PICgo，Typora以及阿里云对象存储OSS搭建自己图床写博客
如何利用阿里云对象存储OSS搭建自己图床写博客 1.购买阿里云 购买链接 登录阿里云–>控制台–>对象存储OSS–购买 购买的时候可以选择按月付费一月一元的,也可以年费9元的,40GB作为 ...
- 阿里云对象存储OSS之通过URL形式进行图片处理
什么是OSS 阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量.安全.低成本.高可靠的云存储服务.它具有与平台无关的RESTful API接口,能够 ...
- 阿里云对象存储OSS与文件存储NAS的区别
一.简介 应用场景:选择一款存储产品,面向文档数据的存取,不会涉及到数据处理. 产品选型主要从OSS和NAS中选择一款,满足文档存储的需求. 二.NAS优缺点 NAS 是一种采用直接与网络介质相连的特 ...
- 使用阿里云对象存储oos遇到跨域访问的问题
使用阿里云对象存储oos遇到跨域访问的问题,因为第一次使用云存储,初级码渣查了好久文档,终于找到了解决方法. 大概就说了这么多,我的操作是来到oos概览一栏 ,找到跨域访问 做了一个最简单的配置,这样 ...
- 阿里云对象存储以及api
阿里云对象存储 简介 对象存储提供了基于分布式系统之上的对象形式的数据存储服务,并且可以通过 RESTful API 数 据读写接口及丰富的SDK接口进行数据的访问 特点 a)非结构存储 对象存储适用 ...
- 阿里云对象存储OSS（Object Storage Service）
文章目录 简介 endpoint:阿里云服务部署的地区位置 见解 开发步骤 配置文件 utils层(读取全局配置文件并赋值给类变量) service层 impl(基于oss驱动sdk实现类) cont ...
- 阿里云对象存储服务OSS前后联调
阿里云对象存储服务OSS前后联调 1.为什么要引入阿里云对象存储服务(OSS)?有什么好处? 1.1.什么是对象存储OSS 1.2.OSS工作原理 2.阿里云对象存储-普通上传方式 2.1.时序图 2 ...
最新文章
- selenium+Headless Chrome实现不弹出浏览器自动化登录
- Spring boot自动配置使用
- 全局容器的创建和使用---单件模式和IOC的容器的应用
- javascript变量声明语法的应用和分号讲究适用性
- [转载] Java-forEach增强for循环是值传递规则详解
- 个推基于Docker和Kubernetes的微服务实践
- 95-134-112-源码-维表-全量加载MySQL
- 易错点：C 语言 continue while for 循环
- dedecms后台上传图片附件返回302的问题
- Rust : channel、多线程与 CTP相关机制的模拟
- pycharm右侧显示代码缩略图/预览 CodeGlance
- LINUX IIO子系统分析之五IIO BUFFER子模块实现分析
- less 使用入门教程
- 前端页面中根据链接随机生成二维码
- 支持NDS的视频音频转换软件Xilisoft Video Converter
- R语言 CART算法和C4.5算法（决策树）
- iphonex蓝牙打不开转圈_苹果6 plus蓝牙打不开总转圈怎么处理?
- 【深度学习小常识】CPU（中央处理器）和GPU（图像处理器）的区别
- JavaScript知识要点 - Web前端开发必备
- c语言输出斐波那契数列前20项,在c语言中，如何利用数组求斐波那契数列的前20项？...