阿里云 OSS React上传文件
简介
阿里云 OSS 是 阿里云提供的海量、安全、低成本、高可靠的云存储服务，提供 99.9999999999%的数据可靠性（号称）。能够使用 RESTful API 可以在互联网任何位置存储和访问，支持容量和处理能力弹性扩展。
基本术语
- bucket ：类似本地的一个文件夹
- object ： oss 存储数据的基本单元，类似本地的一个文件。
- region：oss 存储的数据中心所在区域
- Endpoint：oss 对外服务的访问域名，oss 以 http api 提供服务，不同 region 的 edpoint 不同。
- 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 提供了三种前端直传方式：
- 浏览器签名后直接上传 OSS(无需服务端干预)
- 浏览器请求服务器签名地址后上传(需要服务端配合)
- 浏览器请求服务器签名地址后上传并回调服务端(需要服务端配合)
实际生产环境考虑到安全性必须选择第二种，需要服务端与前端相配合，当安全性要求不高时可采用第一种方式。分别如下。
方式 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 要求方法生成签名数据。其中accessId与accesskey是从 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>
);
}
完整代码如下：
import React, {
Component } from "react";
import {
Form, Upload, message, Button, Icon, Spin, Modal } from "antd";
import "../library/crypto1/crypto/crypto.js";
import "../library/crypto1/hmac/hmac.js";
import "../library/crypto1/sha1/sha1.js";
import Base64 from "../library/base64.js";
import GetOssfileClient from "../Component/GetOssfileClient.js";
class AliyunOSSUpload extends React.Component {
state = {
OSSData: {
},
previewVisible: false,
previewImage: "",
};
async componentDidMount() {
await this.init();
}
init = async () => {
try {
const OSSData = await this.mockGetOSSData();
this.setState({
OSSData,
});
} catch (error) {
message.error(error);
}
};
// Mock get OSS api
// https://help.aliyun.com/document_detail/31988.html
mockGetOSSData = () => {
//实际环境中，签名应该由后台生成，前台请求接口返回关键数据，前后端配合向OSS上传文件
//这里暂时由前端单独实现，自己签名
var policyText = {
expiration: "2020-12-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
conditions: [
["content-length-range", 0, 1048576000], // 设置上传文件的大小限制
],
};
let accesskey = "DkLG58qeaLWX6gMmZkFehuXVUowKJZ"; //不要泄露
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: "LTAI4Fv75GobJhGFkwVzdPJq",
policy: policyBase64, //you
signature: signature,
};
};
onChange = ({
fileList }) => {
const {
onChange } = this.props;
console.log("Aliyun OSS:", fileList);
if (onChange) {
onChange([...fileList]); //修改form
}
};
onRemove = (file) => {
const {
value, onChange } = this.props;
const files = value.filter((v) => v.url !== file.url);
if (onChange) {
onChange(files);
}
};
transformFile = (file) => {
const {
OSSData } = this.state;
const suffix = file.name.slice(file.name.lastIndexOf("."));
const filename = Date.now() + suffix;
file.url = OSSData.dir + filename;
console.log("transformFile file is :", file);
return file;
};
getExtraData = (file) => {
const {
OSSData } = this.state;
return {
key: file.url,
OSSAccessKeyId: OSSData.accessId,
policy: OSSData.policy,
Signature: OSSData.signature,
};
};
beforeUpload = async () => {
const {
OSSData } = this.state;
const expire = OSSData.expire * 1000;
if (expire < Date.now()) {
await this.init();
}
return true;
};
handleCancel = () => {
this.setState({
previewVisible: false,
});
};
//预览，这里使用真实oss地址用于测试下载
//预览可以使用本地图片也可以使用上传到oss真实图片，这里使用真实地址
handlePreview = (file) => {
//file中thumbUrl是本地生成的，url是OSS文件名部分，需要签名后才能访问
console.log("替换前的 file.url", file.url);
if (!file.url.startsWith("http")) {
let url = GetOssfileClient.signatureUrl(file.url);
file.url = url; //替换为签名后的真实路径，
console.log("替换后的 file.url，也就是真实地址是：", file.url);
}
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true,
});
};
render() {
const {
previewVisible, previewImage } = this.state;
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,
onPreview: this.handlePreview,
};
return (
<div>
<Upload {
...props}>
<Icon type="plus" />
</Upload>
<Modal
visible={
previewVisible}
footer={
null}
onCancel={
this.handleCancel}
>
<img alt="example" style={
{
width: "100%" }} src={
previewImage} />
</Modal>
</div>
);
}
}
export default AliyunOSSUpload;
方式 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 已经是签名后的完整路径了。
安全起见，最好使用前后端配置上传下载