当前位置: 首页 > java >正文

【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.xdnf.cn/news/9509.html

相关文章:

  • [AI voiceFFmpeg windows系统下CUDA与cuDNN详细安装教程]
  • 记录一次session安装应用recyclerview更新数据的bug
  • Transformer架构详解:从Attention到ChatGPT
  • 数据脱敏后的测试方法
  • 宏的高级应用 ——一种 C 语言的元编程技巧(X-Macro)
  • Rust 学习笔记:关于迭代器的练习题
  • 用 Python 和 Rust 构建可微分的分子势能模型:深入解析 MOLPIPx 库
  • Rust: CString、CStr和String、str
  • 电商售后服务系统与其他系统集成:实现售后流程自动化
  • Eclipse 插件开发 5.3 编辑器 监听输入
  • AI Agent工具全景解析:从Coze到RAGflow,探索智能体自动化未来!
  • Java、Python、PHP 三种语言实现 二进制与十六进制的相互转换
  • 板凳-------Mysql cookbook学习 (八)
  • Java开发经验——阿里巴巴编码规范实践解析4
  • HTML5 视频播放器:从基础到进阶的实现指南
  • TypeScript 索引签名:灵活处理动态属性对象
  • STM32通过KEIL pack包轻松移植LVGL,并学会使用GUI guider
  • CRM系统的数据库结构详细设计
  • 【大模型原理与技术-毛玉仁】第四章 参数高效微调
  • 基本面高股息策略
  • RabbitMQ 与其他 MQ 的对比分析:Kafka/RocketMQ 选型指南(二)
  • c++结构化绑定
  • Python应用while循环猜数字
  • webpack的安装
  • 签约!京东云与契约锁达成战略合作,携手共推全程数智化解决方案
  • 【计算机网络】IPv6和NAT网络地址转换
  • 【Prometheus+Grafana实战:搭建监控系统(含告警配置)】
  • Vue开发系列——Vue中常见实现区别及Vue.js 模板编译原理
  • EC800GCN 华系列 DTU 开发板介绍
  • 基于 Flink+Paimon+Hologres 搭建淘天集团湖仓一体数据链路