【26-业务开发-基础业务-品牌管理-图片管理-上传图片功能实现-基于阿里云OSS服务-解决跨域问题-设置跨域规则-修改ACL权限为公共读】

最新推荐文章于 2024-05-01 18:02:12 发布
最新推荐文章于 2024-05-01 18:02:12 发布
阅读量409 收藏 1
点赞数 1
分类专栏： 三高商城系统 文章标签： 阿里云 阿里云OSS服务 图片上传功能的实现 阿里云OSS跨域问题与规则设置 阿里云OSS修改权限公共读
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Coder_ljw/article/details/127956159
版权

一.知识回顾

【0.三高商城系统的专题专栏都帮你整理好了，请点击这里！】
【1-系统架构演进过程】
【2-微服务系统架构需求】
【3-高性能、高并发、高可用的三高商城系统项目介绍】
【4-Linux云服务器上安装Docker】
【5-Docker安装部署MySQL和Redis服务】
【6-Git安装与配置过程、Gitee码云上创建项目、IDEA关联克隆的项目】
【7-创建商城系统的子模块并将修改后的信息使用Git提交到Gitee上】
【8-数据库表结构的创建&后台管理系统的搭建】
【9-前端项目的搭建部署、Node安装、VSCode安装】
【10-Node的安装以及全局环境变量的相关配置&解决启动报错的问题(1.Error: Cannot find module ‘fs/promises)(2.npm安装node-sass报错)】
【11-导入人人generator项目并自动生成相关的文件&商品子模块的调试&公共模块common子模块的抽离与实现&Lombok插件的安装】
【12-商品子模块整合MyBatisPlus技术&其它模块通过generator的自动生成与补充完善】
【13-项目中微服务组件的学习-SpringCloudAlibaba微服务生态体系的学习&SpringCloudAlibaba的依赖管理&项目中SpringBoot和SpringCloud版本的统一】
【14-微服务的注册中心与配置中心Nacos&Windows操作系统上安装Nacos和Linux操作系统上用Docker中安装Nacos&每个子项目模块使用Nacos进行服务注册与发现】
【15-项目中服务的远程调用之OpenFeign&订单模块与商品模块集成使用OpenFeign的案例】
【16-配置中心之Nacos的基本使用&Nacos服务之命令空间、Nacos服务之配置组、Nacos服务之配置拆分】
【17-微服务网关之Spring Cloud Gateway&Spring Cloud Gateway网关服务搭建】
【18-业务开发-基础业务-商品模块-分类管理-前后端管理系统的启动-为分类管理表增加数据-Json插件的下载-返回具有层级目录、父子关系结构的数据】
【19-业务开发-基础业务-商品模块-分类管理-管理系统新建菜单-后端项目renren注册到Nacos注册中心和配置中心去-项目gateway网关模块的搭建-浏览器的同源策略与解决跨域问题实操案例】
【20-业务开发-基础业务-商品模块-分类管理-前端展示后端具有层级关系的目录数据-商品系统三级分类的逻辑删除前后端代码实现】
【21-业务开发-基础业务-商品模块-分类管理-商品系统三级分类的新增类别前后端代码实现-商品系统三级分类的更新类别前后端代码实现-之前错误的Bug修正】
【22-业务开发-基础业务-商品模块-分类管理-商品系统三级分类拖拽页面的功能-前后端代码的逻辑实现-访问测试-拖拽开关的开启和关系-批量更新拖拽数据-批量删除选定数据】
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据显示状态使用前端组件开关按钮展示-以及数据处理以及测试】
【24-业务开发-基础业务-品牌管理-图片管理-阿里云OSS服务开通和使用-阿里云OSS服务API使用-SpringCloudAlibaba OSS服务的使用】
【25-业务开发-基础业务-品牌管理-图片管理-图片上传方式的三种实现方式-第三方公共服务模块集成到项目中-服务端生成签名实战】

二.上传图片功能实现-基于阿里云OSS服务

我们需要借助ElementUI中提供的el-upload组件来实现上传操作，我们事先准备了相关的上传代码

在这里插入图片描述

在我们前端项目的@components文件目录下新建一个upload文件夹，然后将这三个文件拷贝到项目目录中

在这里插入图片描述

然后在添加修改品牌的窗口中添加上传的组件

在这里插入图片描述

使用我们导入的自定义的组件
在这里插入图片描述

在操作中，我们发下获取的数据是从response.data中获取的，但是我们在服务端返回的是Map数据，没有data封装，这时我们需要调整后端Thrid服务接口的返回信息通过R对象来返回

在这里插入图片描述

启动我们的网关模块、商品模块、后端管理模块、第三方组件模块
在这里插入图片描述

启动访问，但是前端OSS上传会出现跨域问题，参考官方文档配置即可

image.png

出现跨域问题的解决方案

在这里插入图片描述

跨域规则
在这里插入图片描述

重新访问测试又出现错误----403
在这里插入图片描述

解决方案:
在这里插入图片描述
在这里插入图片描述

继续访问测试：
在这里插入图片描述

然后在OSS服务端也可以看到我们上传成功的文件----》搞定

在这里插入图片描述

好了，关于【26-业务开发-基础业务-品牌管理-图片管理-上传图片功能实现-基于阿里云OSS服务-解决跨域问题-设置跨域规则-修改ACL权限为公共读】就先学习到这里，项目更多的内容持续创作学习中。

硕风和炜
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序阿里云OSS-sdk
08-16
阿里云OSS-sdk，大小536KB 微信小程序纯前端从阿里云OSS下载，可直接引用 文章地址：https://blog.csdn.net/qq_44695727/article/details/132154404
ACP云计算
SeeYouAgain的博客
12-15 4038
本文总结阿里云云计算ACP考试相关试题，仅供参考！如有纰漏，还望指出！ 1、创建阿里云的云服务器ECS实例后，用户无需购买单独的服务就可以抵御的安全攻击或者可以感知的威胁包括 。（正确答案的数量：4个） ABCD A、异地登陆 B、Web漏洞发现 C、DDos攻击 D、暴力密码破解 E、敏感信息泄漏 2、基于已有ECS实例创建伸缩组后，系统会根据业务情况自动添加或减少-组具有相同配置的ECS实例。某用户在创建伸缩组时设置期望实例数为8，并添加3台已有实例，伸缩组创建完成后，已有实例添加...
ACA资料整理
Newtrainee的博客
11-16 4552
ACA题库整理
html2canvas 请求阿里云oss图片跨域问题解决
xinbear的博客
03-27 288
1. html2canvas设置 useCORS:true。2. 阿里云oss允许跨域。
云架构师学习------云存储白皮书深入理解
Avery123123的博客
10-07 751
云存储白皮书深入理解
云尚办公OA系统学习笔记（5.权限管理）
Kiritoasu的博客
05-18 855
每个系统的权限功能都不尽相同，各有其自身的业务特点，对权限管理的设计也都各有特色。页面权限(菜单级)、操作权限（按钮级）、数据权限。当前系统只是讲解：菜单权限与按钮权限的控制。JWT是JSON Web Token的缩写，即JSON Web令牌，是一种自包含令牌。是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源。比如用在用户登录上。JWT最重要的作用就是对 token信息的防伪作用。
阿里云oss文件出现跨域问题
weixin_45896339的博客
06-01 1071
原因：nginx配置了允许跨域，oss也设置了允许跨域。双重跨域导致了pdf出现跨域问题。解决：关闭oss跨域设置。
阿里云OSS图片访问出现跨域：Access to image at from origin has been blocked by CORS policy
qq_37194189的博客
05-02 2794
nginx配置静态资源跨域，或者把图片转成base64。确保加载图片的网站服务器在响应头中包含。这样就会告诉浏览器允许从任何域加载资源。
springcloud：解决阿里云OSS文件访问跨域问题
55555的博客
05-31 6975
最近在高德地图中引用阿里云OSS存储的图片时，出现跨域访问问题，特此记录，以方便后续同学参考1、在阿里云OSS后台管理中，进入权限管理，进入跨域设置，添加跨域规则，设置来源为 图片来源于https://blog.csdn.net/strugglerookie/article/details/1194172812、至此配置完成后访问图片还是会出现跨域问题，这是因为OSS文件默认会开启缓存，及后续访问的实际上是缓存的文件，这就会导致不能匹配到我们上述配置的跨域规则于是我们需要将缓存禁用掉，如果文件就一两个的话
阿里云OSS设置跨域访问
旭东怪的博客
03-30 7519
来源：指定允许的跨域请求的来源。允许多条匹配规则，以回车为间隔。每个匹配规则允许使用最多一个“*”通配符。Allowed Methods：指定允许的跨域请求方法。Allowed Headers：指定允许的跨域请求 header。允许多条匹配规则，以回车为间隔。每个匹配规则使用最多一个“*”通配符。Exposed Headers：指定允许用户从应用程序中访问的响应头（例如一个 Javascript 的 XMLHttpRequest 对象)。备注：每个存储空间最多可以配置 10 条规则。
已解决：前端直传阿里oss报错跨域问题，“No ‘Access-Control-Allow-Origin‘”，这个错误基本就是在阿里的开放平台没做规则配置（附我封装的上传源码）
Spy003的博客
04-29 7918
就直接上阿里oss管理后台去增加一个跨域规则：见图片，特详细配置成这样点确定就好了，就这么简单。
vue-filemanager:基于阿里云OSS对象存储的文件管理网盘。主要使用VUE+ElementUI
04-09
这是用 vue.js 和 ElementUI框架编写的文件管理网盘 后台服务器使用 Node.js 和 Aliyun OSS 对象存储SDK： Installation npm install vue-oss-filemanager --save OR git clone git@github....
上传文件到阿里云OSS-uniapp.zip
09-22
上传文件到阿里云OSS服务的封装。适用于小程序及H5。代码中，做了单个上传及多个文件上传的封装。可设置环境变量区分上传地址。支持图片、音频、视频等资源的上传。
aliyun-oss-support：基于阿里云OSS的WordPress远程附件支持插件
02-05
阿里云OSS支持插件（适用于WordPress的Aliyun OSS）本插件主要为Wordpress提供基于阿里云OSS的远程附件存储功能，并替换的依赖Wordpress本身功能扩展来实现，以保证插件替代或博客搬迁时可以快速切换回原来的方式。...
mac版阿里云oss浏览器 oss-browser-mac-x64.zip
09-29
mac版阿里云oss浏览器 oss-browser-mac-x64.zip
关于阿里云DataWorks的20道面试题
weixin_41312759的博客
05-01 262
阿里云DataWorks是一个全链路的大数据开发治理平台，其主要功能包括数据集成、数据建模与开发、数据地图、数据质量和数据服务等。DataWorks的基本概念围绕其作为一个大数据开发和治理的平台，它整合了多种大数据引擎如MaxCompute、Hologres、EMR、AnalyticDB、CDP等，旨在为数据仓库、数据湖及湖仓一体化解决方案提供全方位的支持。自2009年以来，DataWorks一直在不断进化，沉淀了阿里巴巴在大数据领域的丰富经验和技术实力。
阿里云开源大模型开发环境搭建
最新发布
wys的专栏
05-01 135
阿里云开源大模型开发环境搭建
基于STM32和阿里云的智能台灯（STM32+ESP8266+MQTT+阿里云+语音模块）
qq_37281984的博客
04-24 695
(1)冷光模式和暖光模式两种灯光(可以实现灯光亮度的切换) (2)自动模式(根据光照强度来调整灯光亮度)和手动模式(调整灯光亮度-低中高，或打开/关闭灯光) (3)手动模式(语音控制/结合wifi模块实现手机app的远程控制) (4)本地oled和手机app显示灯光模式等信息
从阿里云崩溃看IT系统非功能能力验证
Mo小泽的技术博客
04-28 941
非功能体系能力是企业技术能力的全面体现，是技术深度认识的完整概括。
element-ui 上传图片到阿里云oss
01-12
要实现在 Element-UI 中上传图片到阿里云 OSS，可以按照以下步骤进行： 1. 安装依赖：首先，需要安装 `ali-oss` 和 `element-ui` 的相关依赖。可以使用 npm 或者 yarn 进行安装。 2. 配置阿里云 OSS：在阿里云 OSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

硕风和炜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值