react + oss 实现文件管理

wlqMore

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

阅读量486

点赞数 7

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

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

本文链接：https://blog.csdn.net/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的文件时，您可以使用分片上传的方式
  在文件上传过程中因网络异常或程序崩溃导致文件上传失败时，可继续上传未完成的部分，您可以使用.  断点续传上传

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

简单上传

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <input id="file" type="file" />
    <button id="upload">上传</button>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
    <script>
      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名称。
        bucket: "examplebucket",
      });

      // 从输入框获取file对象，例如<input type="file" id="file" />。
      let data;
      // 创建并填写Blob数据。
      //const data = new Blob(['Hello OSS']);
      // 创建并填写OSS Buffer内容。
      //const data = new OSS.Buffer(['Hello OSS']);

      const upload = document.getElementById("upload");

      async function putObject(data) {
        try {
          // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
          // 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
          // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
          const options = {
            meta: { temp: "demo" },
            mime: "json",
            headers: { "Content-Type": "text/plain" },
          };
          const result = await client.put("examplefile.txt", data, options);
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      }

      upload.addEventListener("click", () => {
        const data = file.files[0];
        putObject(data);
      });
    </script>
  </body>
</html>

分片上传

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <button id="submit">上传</button>
    <input id="file" type="file" />
    <!--导入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（杭州）为例，Region填写为oss-cn-hangzhou。
        region: "yourRegion",
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken: "yourSecurityToken",
        // 填写Bucket名称，例如examplebucket。
        bucket: "examplebucket",
      });

      const headers = {
        // 指定该Object被下载时的网页缓存行为。
        "Cache-Control": "no-cache",
        // 指定该Object被下载时的名称。
        "Content-Disposition": "example.txt",
        // 指定该Object被下载时的内容编码格式。
        "Content-Encoding": "utf-8",
        // 指定过期时间，单位为毫秒。
        Expires: "1000",
        // 指定Object的存储类型。
        "x-oss-storage-class": "Standard",
        // 指定Object标签，可同时设置多个标签。
        "x-oss-tagging": "Tag1=1&Tag2=2",
        // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
        "x-oss-forbid-overwrite": "true", 
        // 设置该属性以后，同名文件上传会有警告错误
      };

      // 指定上传到oss的指定目录及文件名， 很关键。
      //  服务端会给一个存放文件的目标dir  dir + fileName + 唯一标识， 同时避免了同名文件覆盖的问题
      const name = "exampleobject.txt";
      // 获取DOM。
      const submit = document.getElementById("submit");
      const options = {
        // 获取分片上传进度、断点和返回值。
        progress: (p, cpt, res) => {
          console.log(p);
        },
        // 设置并发上传的分片数量 最大1000。
        parallel: 4,
        // 设置分片大小。默认值为1 MB，最小值为100 KB， 最大值为5GB。
        partSize: 1024 * 1024,
        // headers,
        // 自定义元数据，通过HeadObject接口可以获取Object的元数据。
        meta: { year: 2020, people: "test" },
        mime: "text/plain",
      };

      // 监听按钮。
      submit.addEventListener("click", async () => {
        try {
          const data = document.getElementById("file").files[0];
          // 分片上传。
          const res = await client.multipartUpload(name, data, {
            ...options,
          });
          console.log(res);
        } catch (err) {
          console.log(err);
        }
      });
    </script>
  </body>
</html>

大家可以根据自己的需求场景去选择上传方式，还有断点续传等。

除了上传文件、还有下载、删除、查看文件列表等，在这里就不给大家一一介绍啦。

 osss上传可以借助antd的upload, 采用自定义上传的方式，或者ant.design官方有自己案例

除了借助upload，也可以直接使用input file属性的标签。
不仅可以上传文件，也可以上传文件夹
常见的上传文件的类型

1、<input text="file" accept=".csv" />  cvs格式
 
2、<input text="file"  accept="application/vnd.ms-excel"/>  上传.xls格式
 
3、<input text="fiel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>   上传.xslx格式
 
4、<input type="file" accept="text/plain" />   上传.png/.jpg/etc格式
 
5、<input type="file" accept="image/*" />   上传图片格式
 
6、<input type="file" accept="text/html" />  上传.htm,.html格式
 
7、<input type="file" accept="video/*" />   上传video(.avi, .mpg, .mpeg, .mp4)格式
 
8、<input type="file" accept="audio/*" />   上传audio(.mp3, .wav, etc)格式
 
9、<input type="file" accept=".pdf" />   上传.pdf格式
 
10、<input type="file" accept=".zip" />   上传.zip格式
 
11、<input type="file" accept=".zip" multiple />   上传多个（multiple）
 
12、<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">  如果限制两种文件格式，同时限制
13、上传文件夹  （注意 ： 上传文件夹 只能上传文件夹，不可以和文件同时上传）
<input type="file" webkitdirectory />   上传文件夹 （webkitdirectory）