react + oss 实现文件管理

wlqMore

已于 2023-12-27 17:56:53 修改

阅读量848

点赞数 7

文章标签： react.js 前端 javascript 阿里云

于 2023-12-27 17:05:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45411066/article/details/135247668

版权

react + oss 实现文件管理

首先带大家来简单了解一下阿里云的对象存储oss
官方介绍很详细地址如下：阿里云OSS----Browser.js
前端开发可以只关注Browser.js

1、准备工作

通过阿里云账号开通OSS对象存储的服务，设置oss服务控制台跨域、访问、以及相关的一些配置要求 OSS控制台配置页
一般会将允许的methods全部勾选

安装SDK

有以下两种方式：
一、cdn引入

<!-- 引入在线资源 -->
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.1.min.js"></script>      
<!-- 引入本地资源 -->
<script src="./aliyun-oss-sdk-6.18.1.min.js"></script>

二、npm安装开发SDK包

npm install ali-oss

可以使用import 或require方式去引入，忘记的小伙伴不妨去看看import、require的区别和用法

2、初始化

oss初始化有一些详细的配置，这里就不多说啦，直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!--导入SDK文件-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
     
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
        region: 'yourRegion',
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken: 'yourSecurityToken',
        // 填写Bucket名称，例如examplebucket。
        bucket: "examplebucket",
      });
    </script>
  </body>
</html>

更多的配置大家可以去参考这里!!!
正常开发过程中，一般不回去开通STS服务，获取到OSS的region， accessKeyId， accessKeySecret， bucket，就可以快速实现上传、下载、查看、拷贝、删除等文件操作。

3、快速入门

 具体很具大家的需求来定， 如何只是单纯的文件存储管理，可以不去耗费人力去搭建STS服务，如果需要的话，打通STS Server的工作可以让服务端同步进行。

上传文件

  需要大家提前了解一些概述：
  将File对象、Blob数据以及OSS Buffer上传到OSS时，您可以使用简单上传方式
  当您需要上传大于100 MB且小于48.8 TB的文件时，您可以使用分片上传的方式
  在文件上传过程中因网络异常或程序崩溃导致文件上传失败时，可继续上传未完成的部分，您可以使用.  断点续传上传

大家可以点击相应标题详细去了解不同上传方式的用法和适用场景