React实现阿里云OSS上传文件的示例

简介

阿里云 OSS 是 阿里云提供的海量、安全、低成本、高可靠的云存储服务,提供 99.9999999999%的数据可靠性(号称)。能够使用 RESTful API 可以在互联网任何位置存储和访问,支持容量和处理能力弹性扩展。

基本术语

1.bucket :类似本地的一个文件夹
2.object : oss 存储数据的基本单元,类似本地的一个文件。
3.region:oss 存储的数据中心所在区域
4.Endpoint:oss 对外服务的访问域名,oss 以 http api 提供服务,不同 region 的 edpoint 不同。
5.AccessKey:访问秘钥,简称 AK,包括 AccessKeyId 和 AccessKeySecret,用于验证访问者身份。后者必须保密

跨域 CROS 设置

进入 控制台-》基本设置-》跨域-》新增 弹出对话框以后填入来源:域名和端口信息。我们如果使用类似之前 Azure 中 blob 网页直接上传的服务器的方式时需要配置跨域,域名和端口绑定我们的不同环境对应的域名和端口

OSS 操作

创建文件存放位置

进入控制台-》创建 bucket -》填写配置 -》完成

控制台上传下载(简单测试)

文件管理-》创建目录 -》上传文件

生成 AccessKey 及 AccessSecrect

点击头像 -》AccessKey 管理 -》开始使用子用户 Key -》填写子用户名,勾选编程访问,确定 -》验证码接受填写,确定 -》得到 key 和 Secret -》权限管理-》授权 -》新增管理对象存储 OSS 权限

注意:这里必须使用子用户的 key,如果用主账号容易导致提交代码时的权限泄露,一旦 key 和 secret 泄露相当于账号密码泄露,服务器就完全暴露给了别人。

API 操作

实际项目中并不是依靠在控制台手工操作,而是利用程序来控制上传下载。OSS 提供了一系列的 restful API 来实现文件上传于下载。

可以利用阿里云提供的 SDK 简化实现。具体见下文。

前端上传文件程序开发

基本流程

在实际项目中,一般采用分布式及微服务的 web 业务系统中,文件的上传和下载都是直接在前端来实现对 oss 的操作。也就是前端直接上传,不通过自己的服务器。这样能够实现系统无阻碍的横向扩展。另一个原因是如果要把文件保存在运行 web 服务器的同一台服务器上时,那么在文件上传时可能会占满带宽,影响 web 的访问。分开存储不占服务器带宽。

阿里 OSS 提供了三种前端直传方式:

1.浏览器签名后直接上传 OSS(无需服务端干预)
2.浏览器请求服务器签名地址后上传(需要服务端配合)
3.浏览器请求服务器签名地址后上传并回调服务端(需要服务端配合)

实际生产环境考虑到安全性必须选择第二种,需要服务端与前端相配合,当安全性要求不高时可采用第一种方式。分别如下。

方式 1:前端直传(无须服务端干预)

为保证文件的安全性,一般设置 bucket 为私有,也就是鉴权以后的用户才能访问 OSS 中的内容。前端直传的原理是在浏览器端根据 OSS 控制台提供的 AccessId 和 AccessSecret 生成签名直接上传,不需要经过服务端,优点是使用简单,缺点是不安全。

React 搭配 antd 中 upload 组件实现如下:

upload 组件提供了 beforeUpload钩子函数,在执行向 OSSpost 文件前我们先在本地计算好 OSS 要求的签名,如下:

beforeUpload = async () => {
 const { OSSData } = this.state;
 const expire = OSSData.expire * 1000;

 if (expire < Date.now()) {
  await this.init();
 }
 return true;
};

init = async () => {
 try {
  const OSSData = await this.mockGetOSSData();

  this.setState({
   OSSData,
  });
 } catch (error) {
  message.error(error);
 }
};
mockGetOSSData = () => {
 var policyText = {
  expiration: "2020-12-01T12:00:00.000Z", //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
  conditions: [
   ["content-length-range", 0, 1048576000], // 设置上传文件的大小限制
  ],
 };
 let accesskey = "你自己的"; //不要泄露
 var policyBase64 = Base64.encode(JSON.stringify(policyText));
 let message = policyBase64;
 var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true });
 var signature = Crypto.util.bytesToBase64(bytes);

 return {
  dir: "user-dir/", //bucket中的路径
  expire: "0", //有效时间戳'1577811661',
  host: "http://om-test-oss.oss-cn-beijing.aliyuncs.com",
  accessId: "你自己的",
  policy: policyBase64, //you
  signature: signature,
 };
};

钩子函数首先计算签名是否过期,如果过期则通过init函数间接调用mockGetOSSData生成通过 Base64 等 OSS 要求方法生成签名数据。其中accessIdaccesskey是从 OSS 控制台拿到的。

生成签名数据后,利用upload组件中actionprops 直接将文件上传目的地指向 OSS 的实际有效地址,并进行上传

render() {
  const { value } = this.props;
  const props = {
   name: 'file',
   listType: "picture-card",
   fileList: value,
   action: this.state.OSSData.host,
   onChange: this.onChange,
   onRemove: this.onRemove,
   transformFile: this.transformFile,
   data: this.getExtraData,
   beforeUpload: this.beforeUpload,
  };
  return (
   <Upload {...props}>
    <Icon type="plus" />
   </Upload>
  );
 }

完整代码如下:

render() {
  const { value } = this.props;
  const props = {
   name: 'file',
   listType: "picture-card",
   fileList: value,
   action: this.state.OSSData.host,
   onChange: this.onChange,
   onRemove: this.onRemove,
   transformFile: this.transformFile,
   data: this.getExtraData,
   beforeUpload: this.beforeUpload,
  };
  return (
   <Upload {...props}>
    <Icon type="plus" />
   </Upload>
  );
 }

方式 2:前端与后端配合上传

后端鉴权接口

后端需要增加一个接口:后端利用阿里提供的 SDK,编写鉴权接口,入参是要上传的文件内容,根据控制台得到的 endpoint、AccessKey 和 AccessSecret 实例化 client,每次前端上传文件前请求本接口,服务端与阿里云 OSS 交互,根据 bucket 拿到签名后的上传、下载地址(过程中可以设置上传下载的有效期以及 Conetent-Type),将两者以及文件名返回给前端,用于前端的下一步操作。

前端分别请求

前端然后根据后端鉴权接口返回签名后的 puturl 采用 put 方式上传图片文件。在前端 put 上传图片成功后可以通过 geturl 拿到图片来进行网页回显,回显同时将图片名称插入到要提交表单中,最后点击提交按钮将图片路径等信息 post 到自己后端另一个接口中,后端保存到数据库。

前端程序与上文中的方式 1 大同小异,唯一不同在于mockGetOSSData函数,之前是由前端计算签名,这里是调用后端的鉴权接口来获得签名数据。

**注意:**最后一个接口调用中文件名称只有后半部分,前半部分路径是 OSS 提供的 bucket 路径,完全相同,再次展示时前端自行拼接。

上传中途失败处理

上述前端直传流程至少调用三个接口:鉴权、上传、保存。如果在上传文件后没有调用保存接口,也就是应用服务没有把 OSS 中文件关联到数据库中时会造成 OSSbucket 中有脏数据的情况,解决办法是:先让用户上传到一个临时的文件夹中,当调用保存接口后再移动到真正的 bucket 中,然后定时删除临时文件夹。

前端下载文件程序开发

与上传类似,OSS 也支持浏览器下载,在 bucket 的读写权限设置为私有后,读写均需签名才可以。举例如下:

如果上传图片到 OSS 成功后,得到的图片 url 是user-dir/1580982085120.png,如果直接拼接 OSS 前半部分为http://om-test-oss.oss-cn-beijing.aliyuncs.com/user-dir/1580982085120.png访问会提示失败,因为 OSS 有判断没有签名信息会拒绝访问,真正的签名后的图片地址是:http://om-test-oss.oss-cn-beijing.aliyuncs.com/user-dir/1580982085120.png?OSSAccessKeyId=LTAI4Fv75GobJhGFkwVzdPJq&Expires=1580983892&Signature=FZYmRRo6XnFu3INC55zJSdTWT%2Fc%3D

我们要做的就是得到签名后的下载地址。下载与上传相同,也分为是否需要服务器参与的两种方式。

方式 1:前端签名直接下载

前端签名与上传类似,根据 AccessId 与 AccessSecret 来生成签名信息。

签名信息可以在请求携带在 URL 中也可以携带在请求 header 中,为方便使用,此次调研使用前者。

本地签名使用了 OSS 提供的 SDK,react 首先安装

npm install ali-oss --save

然后在组件中引入

import OSS from "ali-oss";

封装 SDK 的签名方法简化使用

import React, { Component } from "react";
import OSS from "ali-oss";
let GetOssfileClient = new OSS({
 region: "oss-cn-beijing", //oss所在region,由运维提供
 accessKeyId: "你自己的", //oss的子accessKeyId,由运维提供
 accessKeySecret: "你自己的", //oss的子accessKeySecret,由运维提供
 bucket: "om-test-oss", //oss的buket名称,运维提供
});
export default GetOssfileClient;

上传组件的预览功能使用到了图片下载如下:

//预览可以使用本地图片也可以使用上传到oss真实图片,这里使用真实地址用来测试对oss的访问
handlePreview = (file) => {
 //file中thumbUrl是本地生成的,url是OSS文件名部分,需要签名后才能访问
 console.log("替换前的 file.url", file.url);
 let url = GetOssfileClient.signatureUrl(file.url);
 console.log(url);
 file.url = url; //替换为签名后的真实路径,
 console.log("替换后的 file.url,也就是真实地址是:", file.url);
 this.setState({
  previewImage: file.url || file.thumbUrl,
  previewVisible: true,
 });
};

这里使用 upload 组件预览功能来测试图片的下载显示。当点击预览触图标时会触发handlePreview函数,我们拿到真实图片文件的文件名,然后使用 sdk 的signatureUrl方法签名后得到真实路径,然后在 modal 中显示。

<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
 <img alt="example" style={{ width: "100%" }} src={previewImage} />
</Modal>

方式 2:前端根据后端返回的连接下载

同上述前端上传文件程序开发->方式2,前端直接使用后端代码返回的 url 来显示图片即可,后端返回的 url 已经是签名后的完整路径了。

安全起见,最好使用前后端配置上传下载

到此这篇关于React实现阿里云OSS上传文件的示例的文章就介绍到这了,更多相关React 阿里云OSS上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Java下载https文件并上传阿里云oss服务器

    这篇文章主要介绍了Java下载https文件并上传到阿里云oss服务器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 今天做了一个从Https链接中下载音频并且上传到OSS服务器,记录一下希望大家也少走弯路. 一共两个类: 1 .实现自己的证书信任管理器类 /** * @author mazhq * @Title: X509TrustUtiil * @ProjectName: zeus * @Description: 证书信任管理器类 * @d

  • 阿里云OSS域名配置及简单上传的示例代码

    目前开发系统,附件文件一般都会使用第三方的存储空间来保存,一方面是为了开发者提供便利,另一方可以减轻系统的访问压力,下面介绍一下阿里云的OSS的一些简单配置和使用. 一.阿里云OSS配置 前提:你需要购买阿里云的OSS服务器,这里就不多介绍:你需要有一个备案域名,此处也不多介绍(本人使用的阿里云进行备案的域名). 1. 阿里云OSS配置域名 1)创建bucket 2)选择tpw-bucket的"域名管理",然后点击绑定用户域名: 3)创建域名: 此处创建二级域名进行绑定,如果你想简单,

  • Thinkphp整合阿里云OSS图片上传实例代码

    Thinkphp3.2整合阿里云OSS图片上传实例,图片上传至OSS可减少服务器压力,节省宽带,安全又稳定,阿里云OSS对于做负载均衡非常方便,不用传到各个服务器了 首先引入阿里云OSS类库 <?php namespace Home\Controller; use Think\Controller; use OSS\Core\OssException; vendor('aliyun.autoload'); 上传图片自己写,上传成功到阿里云后,删除临时文件 function aliyun() {

  • Nginx 代理转发阿里云OSS上传的实现代码

    前言 因为小程序上传需要https,服务器https用的是letsencrypt生成的证书,但是阿里云oss没有做https(懒得上传证书),就想着用Nginx代理转发上传请求. Nginx配置 # HTTPS server # server { listen 443 ssl; server_name your.domain.name; ... location / { proxy_pass http://127.0.0.1:3000; proxy_set_header Host $Host;

  • Vue.js上传图片到阿里云OSS存储的方法示例

    如何在VueJS使用阿里云存储上传图片? 什么是OSS呢? 其实按照官网的解释就是->>阿里云对象存储服务(Object Storage Service) 在实际开发中,公司可能会用到OSS随时来存储一些数据,比如像文本.图片.音频和视频等在内的各种非结构化数据文件,恰好,在做项目的时候,刚好用到了OSS存储,对于我这个萌新,从来没用过,那么我们先来看看文档,看看是怎么一回事~看看前端在VueJS的环境下是如何上传OSS的 (1)首先,打开官网-----https://www.aliyun.c

  • springboot整合阿里云oss上传的方法示例

    OSS申请和配置 1. 注册登录 输入网址:https://www.aliyun.com/product/oss 如果没有账号点击免费注册,然后登录. 2.开通以及配置 点击立即开通 进入管理控制台 第一次使用会出现引导,按引导点击"我知道了",然后点击创建Bucket. 如果没有存储包或流量包点击购买. 点击确定,返回主页面,出现该页面,点击我知道了 将EndPoint记录下来,方便后期添加到我们项目的配置文件中 创建 AccessKeyID 和 AccessKeySecret 点击

  • SpringBoot集成阿里云OSS图片上传

    简述 最近做的公司项目,图片比较多,不想给其存储到自己服务器上,就买了阿里云的OSS服务器来哦进行存储,其实集成第三方平台,一般没什么难度,当然,你要仔细看对方的API文档,这篇主要说一下个人集成OSS的过程 步骤 1.pom.xml中添加OSS的SDK <!-- 图片上传 SDK 阿里云oss --> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-os

  • React实现阿里云OSS上传文件的示例

    简介 阿里云 OSS 是 阿里云提供的海量.安全.低成本.高可靠的云存储服务,提供 99.9999999999%的数据可靠性(号称).能够使用 RESTful API 可以在互联网任何位置存储和访问,支持容量和处理能力弹性扩展. 基本术语 1.bucket :类似本地的一个文件夹 2.object : oss 存储数据的基本单元,类似本地的一个文件. 3.region:oss 存储的数据中心所在区域 4.Endpoint:oss 对外服务的访问域名,oss 以 http api 提供服务,不同

  • Springboot集成阿里云OSS上传文件系统教程

    第一步:开通阿里云OSS服务,创建Bucket,获取id和密钥 第二步:根据官方文档编写上传代码 1.新建maven项目 添加依赖: <!-- 阿里云oss依赖 --> <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> </dependency> <!-- 日期工具栏依赖 --> <

  • Android实现阿里云oss上传流程解析

    购买了阿里云的oss空间,于是用它来存储图片,不过中间的使用算是出了些问题,导致很长的才成功. 不得不说,阿里云文档真的是无力吐槽...乱七八糟的.我完全是东拼西凑,才完成的图片上传功能. 走了很多的弯路,今天来记录下. 服务器上传: 阿里云上传分服务器上传和客户端上传,首先要分清,因为两边有差别的,服务器的上传简单很多,官方给的下载下来,输入配置的参数accessKeyId 和accessKeySecret 还有bucketName 就能够上传成功,很简单,这里也就不细说了. 客户端上传: 这

  • yii2.0整合阿里云oss删除单个文件的方法

    主要思路,在controller里边通过获得要删除的文件fileid,把fileid传递给model的deletefile方法进行处理,并返回处理结果. 在deletefile方法里边,先根据id找到对应的文件信息,然后删除数据里边的记录和阿里云oss里边的文件和本地的文件. 主要步骤如下: 1 首先是构建一个view视图,或者写一个ajax发送请求,此处代码略(让前端去写吧). 2 在控制器里边接收参数,并转交给model.控制器UploadController.php里边的代码参考如下: /

  • django 配置阿里云OSS存储media文件的例子

    1. 安装django-aliyun-oss2-storage包 linux上用 pip install django-aliyun-oss2-storage 无报错,顺利安装 windows上报错: (python3_sbs) F:\projects\virtualenv\python3_sbs\Scripts>pip install django-aliyun-oss2-storage Collecting django-aliyun-oss2-storage Using cached dj

  • 详解PHP使用OSS上传文件

    目录 一.安装阿里云 oss sdk 二.使用 1.获取 OSS AccessKeyId.AccessKeySecret 2.简易上传 Html 处理 3.控制器处理 OssImageController.php  4.service层处理 OssImageService.php 5.oss 实例及参数获取封装 AliOss.php 6.结果是可以上传成功 三.问题说明 一.安装阿里云 oss sdk 在网站根目录执行下面命令,安装oss sdk. composer require aliyun

  • spring boot实现阿里云视频点播上传视频功能(复制粘贴即可)

    目录: 1.spring boot实现阿里云视频点播上传视频(复制粘贴即可) 2.spring boot 实现阿里云视频点播 --删除视频 准备工作: 阿里云地址: https://www.aliyun.com/ 登录阿里云,确保账户有余额,有几毛钱就够了,开发学习基本不花钱. 2.进入阿里云开通视频点播功能 3.获取阿里云密钥 代码编写: 目录结构: application.properties # 服务端口 server.port=8003 # 服务名 spring.application.

  • 微信小程序实现云开发上传文件、图片功能

    目录 一.前言 二.功能简介 1.选择微信聊天记录中的文件 2.选择本地相册/拍照图片 3.上传功能 三.实现代码 1.选择聊天文件函数(js) 2.选择相册函数(js) 3.上传文件函数(js) 4.调用示例 4-1.云存储新建文件夹 4-2.完整调用代码 4-3.实现效果 四.结语 一.前言 今天的博客所实现的功能很简单,但是也很常用. 本文将这常用的代码进行了封装,可以放入自己utils类中使用,加快开发速度. 实现的功能有两个: 一.选择微信聊天文件并上传. 二.选择本地相册/拍摄图片上

随机推荐