如何用React实现阿里云OSS上传文件功能？

本文共计1858个文字，预计阅读时间需要8分钟。

简介：阿里云OSS是阿里云提供的海量、安全、低成本、高可靠的云存储服务，提供99.9999999999%的数据可靠性（简称11个9）。支持使用RESTful API，可在互联网任意位置进行存储和访问，支持海量容量。

简介

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

基本术语

1.bucket ：类似本地的一个文件夹
2.object ： oss 存储数据的基本单元，类似本地的一个文件。
3.region：oss 存储的数据中心所在区域
4.Endpoint：oss 对外服务的访问域名，oss 以 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> ); }

完整代码如下：

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 前半部分为om-test-oss.oss-cn-beijing.aliyuncs.com/user-dir/1580982085120.png访问会提示失败，因为 OSS 有判断没有签名信息会拒绝访问，真正的签名后的图片地址是：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上传内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！