【OSS】 前端如何直接上传到OSS 上返回https链接,如果做到OSS图片资源加密访问

使用阿里云OSS(对象存储服务)进行前端直接上传并返回HTTPS链接,同时实现图片资源的加密访问,可以通过以下步骤实现:

前端直接上传到OSS并返回HTTPS链接

  1. 设置OSS Bucket

    • 确保你的OSS Bucket已创建,并且设置为公共读或私有(根据访问控制需求)。
    • 在Bucket属性中启用HTTPS访问。
  2. 生成上传策略和签名

    • 在后端生成一个上传策略(Policy)和签名(Signature),用于前端直接上传文件。
    • 策略中应包括OSS的Endpoint、Bucket名称、上传路径、过期时间等。
  3. 前端上传代码

    • 使用阿里云OSS SDK(如ali-oss)进行上传。

    • 示例代码(使用JavaScript):

      import OSS from 'ali-oss';const client = new OSS({region: 'your-oss-region', // 例如: 'oss-cn-hangzhou'accessKeyId: 'your-access-key-id', // 建议在后端生成临时凭证accessKeySecret: 'your-access-key-secret', // 建议在后端生成临时凭证bucket: 'your-bucket-name'
      });async function uploadFile(file) {try {const result = await client.put('your-upload-path/' + file.name, file);console.log('File uploaded:', result.url); // 返回HTTPS链接return result.url;} catch (error) {console.error('Upload error:', error);}
      }// 示例调用
      const fileInput = document.getElementById('file-input');
      fileInput.addEventListener('change', (e) => {const file = e.target.files[0];if (file) {uploadFile(file);}
      });
      
    • 注意:出于安全考虑,不建议在前端直接使用永久AccessKey,建议使用后端生成临时凭证(STS Token)。

  4. 获取HTTPS链接

    • 上传成功后,result.url即为文件的HTTPS访问链接。

图片资源加密访问

  1. 使用HTTPS

    • 确保OSS的Endpoint是HTTPS,这样所有上传和访问的链接都是通过HTTPS加密传输的。
  2. Bucket权限控制

    • 设置Bucket为私有,这样只有授权用户才能访问资源。
    • 通过生成预签名URL(Signed URL)来实现临时访问权限。
  3. 生成预签名URL

    • 在后端生成预签名URL,用于临时授权访问私有Bucket中的文件。

    • 示例代码(Node.js):

      const OSS = require('ali-oss');const client = new OSS({region: 'your-oss-region',accessKeyId: 'your-access-key-id',accessKeySecret: 'your-access-key-secret',bucket: 'your-bucket-name'
      });async function generateSignedUrl(fileName, expires) {try {const url = client.signatureUrl(fileName, {expires: expires, // 例如: 3600 表示1小时后过期process: 'image/resize,w_200' // 可选:对图片进行实时处理});console.log('Signed URL:', url);return url;} catch (error) {console.error('Generate signed URL error:', error);}
      }// 示例调用
      generateSignedUrl('your-file-path.jpg', 3600);
      
  4. 前端使用预签名URL

    • 前端从后端获取预签名URL后,可以直接在<img>标签中使用该URL进行图片展示。

    • 示例:

      <img src="signed-url-from-backend" alt="Encrypted Image">
      

通过上述步骤,你可以实现前端直接上传文件到OSS并返回HTTPS链接,同时通过预签名URL实现图片资源的加密访问。

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

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

相关文章

TDenigne 集群可视化管理

可视化管理工具 为方便用户更高效地使用和管理 TDengine&#xff0c;TDengine 3.0 版本推出了一个全新的可视化组件 taosExplorer。这个组件旨在帮助用户在不熟悉 SQL 的情况下&#xff0c;也能轻松管理 TDengine 集群。通过 taosExplorer&#xff0c;用户可以轻松查看 TDengi…

Centos7安装gitlab

环境准备&#xff1a; 操作系统&#xff1a;Centos7 内存&#xff1a;2G以上 磁盘&#xff1a;50G 安全&#xff1a;关闭防火墙&#xff0c;selinux 1、安装GitLab所需依赖 yum -y install policycoreutils openssh-server openssh-clients postfix 2、设置postfix开机自启…

【前端面经】云智慧一面

写在前面&#xff1a;面经只是记录博主遇到的题目。每题的答案在编写文档的时候已经有问过deepseek&#xff0c;它只是一种比较普世的答案&#xff0c;要学得深入还是靠自己 Q&#xff1a;手撕代码&#xff0c;两个有序数组排序 A&#xff1a; function mysort(arr1, arr2) {…

Leetcode 3568. Minimum Moves to Clean the Classroom

Leetcode 3568. Minimum Moves to Clean the Classroom 1. 解题思路2. 代码实现 题目链接&#xff1a;3568. Minimum Moves to Clean the Classroom 1. 解题思路 这一题我的核心思路就是广度优先遍历遍历剪枝。 显然&#xff0c;我们可以给出一个广度优先遍历来给出所有可能…

Spring Boot,注解,@RestController

RestController 是 Spring MVC 中用于创建 RESTful Web 服务的核心注解。 RestController 核心知识点 REST 作用: RestController 是一个方便的组合注解&#xff0c;它结合了 Controller 和 ResponseBody 两个注解。 Controller: 将类标记为一个控制器&#xff0c;使其能够处理…

【计算机网络】Linux下简单的UDP服务器(超详细)

套接字接口 我们把服务器封装成一个类&#xff0c;当我们定义出一个服务器对象后需要马上初始化服务器&#xff0c;而初始化服务器需要做的第一件事就是创建套接字。 &#x1f30e;socket函数 这是Linux中创建套接字的系统调用,函数原型如下: int socket(int domain, int typ…

Fashion-MNIST LeNet训练

前面使用线性神经网络softmax 和 多层感知机进行图像分类&#xff0c;本次我们使用LeNet 卷积神经网络进行 训练&#xff0c;期望能捕捉到图像中的图像结构信息&#xff0c;提高识别精度&#xff1a; import torch import torchvision from torchvision import transforms f…

EasyRTC嵌入式音视频通信SDK助力1v1实时音视频通话全场景应用

一、方案概述​ 在数字化通信需求日益增长的今天&#xff0c;EasyRTC作为一款全平台互通的实时视频通话方案&#xff0c;实现了设备与平台间的跨端连接。它支持微信小程序、APP、PC客户端等多端协同&#xff0c;开发者通过该方案可快速搭建1v1实时音视频通信系统&#xff0c;适…

查看make命令执行后涉及的预编译宏定义的值

要查看 make 命令执行后涉及的预编译宏定义&#xff08;如 -D 定义的宏&#xff09;及其值&#xff0c;可以采用以下方法&#xff1a; 1. 查看 Makefile 中的宏定义 直接检查 Makefile 或相关构建脚本&#xff08;如 configure、CMakeLists.txt&#xff09;&#xff0c;寻找 -…

【C/C++】面试常考题目

面试中最常考的数据结构与算法题&#xff0c;适合作为刷题的第一阶段重点。 ✅ 分类 & 推荐题目列表&#xff08;精选 70 道核心题&#xff09; 一、数组 & 字符串&#xff08;共 15 题&#xff09; 题目类型LeetCode编号两数之和哈希表#1盛最多水的容器双指针#11三数…

【芯片学习】555

一、引脚作用 二、原理图 三、等效原理图 1.比较器 同相输入端大于反相输入端&#xff0c;输出高电平&#xff0c;反之亦然 2.三极管 给它输入高电平就可以导通 3.模拟电路部分 4.数字电路部分 这部分的核心是RS触发器&#xff0c;R-reset代表0&#xff0c;set是置位代表1&am…

Linux《文件系统》

在之前的系统IO当中已经了解了“内存”级别的文件操作&#xff0c;了解了文件描述符、重定向、缓冲区等概念&#xff0c;在了解了这些的知识之后还封装出了我们自己的libc库。接下来在本篇当中将会将视角从内存转向磁盘&#xff0c;研究文件在内存当中是如何进行存储的&#xf…

Java-代码段-http接口调用自身服务中的其他http接口(mock)-并建立socket连接发送和接收报文实例

最新版本更新 https://code.jiangjiesheng.cn/article/367?fromcsdn 推荐 《高并发 & 微服务 & 性能调优实战案例100讲 源码下载》 1. controller入口 ApiOperation("模拟平台端现场机socket交互过程,需要Authorization")PostMapping(path "/testS…

基于递归思想的系统架构图自动化生成实践

文章目录 一、核心思想解析二、关键技术实现1. 动态布局算法2. 样式规范集成3. MCP服务封装三、典型应用场景四、最佳实践建议五、扩展方向一、核心思想解析 本系统通过递归算法实现了Markdown层级结构到PPTX架构图的自动转换,其核心设计思想包含两个维度: 数据结构递归:将…

Python包管理器 uv替代conda?

有人问&#xff1a;python的包管理器uv可以替代conda吗? 搞数据和算法的把conda当宝贝&#xff0c;其他的场景能替代。 Python的包管理器有很多&#xff0c;pip是原配&#xff0c;uv是后起之秀&#xff0c;conda则主打数据科学。 uv替代pip似乎只是时间问题了&#xff0c;它…

使用pnpm、vite搭建Phaserjs的开发环境

首先&#xff0c;确保你已经安装了 Node.js 和 npm。然后按照以下步骤操作&#xff1a; 一、使用pnpm初始化一个新的 Vite 项目 pnpm create vite 输入名字 选择模板&#xff0c;这里我选择Vanilla,也可以选择其他的比如vue 选择语言 项目新建完成 二、安装相关依赖 进入项…

JS逆向案例—喜马拉雅xm-sign详情页爬取

JS逆向案例——喜马拉雅xm-sign详情页爬取 声明网站流程分析总结 声明 本文章中所有内容仅供学习交流&#xff0c;抓包内容、敏感网址、数据接口均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff0c;若有侵权&am…

姜老师的MBTI课程:MBTI是可以转变的

我们先来看内向和外向这条轴&#xff0c;I和E内向和外向受先天遗传因素的影响还是比较大的&#xff0c;因为它事关到了你的硬件&#xff0c;也就是大脑的模型。但是我们在大五人格的排雷避坑和这套课程里面都强调了一个观点&#xff0c;内向和外向各有优势&#xff0c;也各有不…

进程同步:生产者-消费者 题目

正确答案&#xff1a; 问题类型&#xff1a; 经典生产者 - 消费者问题 同时涉及同步和互斥。 同步&#xff1a;生产者与消费者通过信号量协调生产 / 消费节奏&#xff08;如缓冲区满时生产者等待&#xff0c;空时消费者等待&#xff09;。互斥&#xff1a;对共享缓冲区的访问需…

吴恩达MCP课程(1):chat_bot

原课程代码是用Anthropic写的&#xff0c;下面代码是用OpenAI改写的&#xff0c;模型则用阿里巴巴的模型做测试 .env 文件为&#xff1a; OPENAI_API_KEYsk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx OPENAI_API_BASEhttps://dashscope.aliyuncs.com/compatible-mode…