前端(react)上传到阿里云OSS存储 实例

需求背景

由于现有的后台管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出直接从前端上传视频或者其他文件到阿里云OSS存储。

  • 阿里云OSS

阿里云OSS文档介绍,这里不做过多赘述

安装

原本在最开始的时候,是使用node版本的SDK,最开始使用的[nodejs版本]

代码如下

async function put() {
      try {
        let result = await client.put('qq.mp4', fileObj);
        console.log(result);
      } catch (err) {
        console.log(keyObject.AccessKeyId);
        console.log(keyObject.AccessKeySecret);
        console.log(keyObject.SecurityToken);

        console.log(err);
      }
    }
    put();

开始上传图片的时候还没有翻车,但是上传超过30多M的时候,就翻车了,在阿里云OSS后台查看文件大小为0KB

本来是想用fs模块来操作文件的,但是发现fs在浏览器端,没法儿使用所以就放弃了nodejs版本的SDK

browser版本

后面仔细查阅文档, 发现browser版本SDK有一个片段上传的文档,于是就采用了[browser]版本。

使用 browser版本的SDK支持片段上传,同时可以通过片段上传返回回来的进度,制作进度条提示,方便操作业务逻辑

let ossConfig = {
      region: 'oss-cn-hangzhou',
      //云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。
      accessKeyId: keyObject.AccessKeyId,
      accessKeySecret: keyObject.AccessKeySecret,
      stsToken: keyObject.SecurityToken,
      bucket: 'wesmart-app'
    }

let tempCheckpoint;

    // 定义上传方法。
    async function multipartUpload() {
      try {
        // object-key可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。
        let result = await client.multipartUpload('02', fileObj, {
          progress: function (p, checkpoint) {
            // 断点记录点。浏览器重启后无法直接继续上传,您需要手动触发上传操作。
            tempCheckpoint = checkpoint;
            console.log(p);
            console.log(checkpoint);
          },
          mime: 'video/mp4'
        })
      } catch (e) {
        console.log(e);
      }
    }
  • client.multipartUpload方法
  1. 第一个参数为自定义的上传文件的名称,建议使用时间戳进行后缀命名,保证文件的唯一性,不会被覆盖

  2. 第二个参数为文件 回调函数progress,可以查看上传的进度以及文件的相关信息

注意事项

上面需要的对象字段可以通过阿里云后台OSS进行查看,在开发的过程中,个人建议通过请求后端返回的相关key值进行操作

在上传代码的时候,使用的put请求,而且刚开始会报错跨域的问题,需要在阿里云OSS进行配置允许请求

Exresponse Header设置为etag

源码

import React, { useState, useEffect } from 'react';
import axios from "axios";
const OSS = require('ali-oss');
class Example extends React.Component {
  state = {
    count: 0,
    keyObject: {},
    upfile: "",
  }
  componentDidMount() {
    this.getData();
  }
  getData() {
    let that = this;
    axios.get('获取keyId的接口地址')
      .then(function (response) {
        console.log(response);
        let { status, data } = response;
        if (status == 200) {
          that.setState({
            keyObject: data
          });
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  handleUpload() {
    let { keyObject, upfile } = this.state;
    var fileObj = document.getElementById("file").files[0];
    console.log(fileObj);
    console.log(keyObject);
    let ossConfig = {
      region: 'oss-cn-hangzhou',
      //云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。
      accessKeyId: keyObject.AccessKeyId,
      accessKeySecret: keyObject.AccessKeySecret,
      stsToken: keyObject.SecurityToken,
      bucket: 'wesmart-app'
    }
    let client = new OSS({
      region: 'oss-cn-hangzhou',
      //云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。
      accessKeyId: keyObject.AccessKeyId,
      accessKeySecret: keyObject.AccessKeySecret,
      stsToken: keyObject.SecurityToken,
      bucket: 'wesmart-app'
    });

    // async function put() {
    //   try {
    //     let result = await client.put('qq.mp4', fileObj);
    //     console.log(result);
    //   } catch (err) {
    //     console.log(keyObject.AccessKeyId);
    //     console.log(keyObject.AccessKeySecret);
    //     console.log(keyObject.SecurityToken);

    //     console.log(err);
    //   }
    // }

    // put();


    let tempCheckpoint;

    // 定义上传方法。
    async function multipartUpload() {
      try {
        // object-key可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。
        let result = await client.multipartUpload('02', fileObj, {
          progress: function (p, checkpoint) {
            // 断点记录点。浏览器重启后无法直接继续上传,您需要手动触发上传操作。
            tempCheckpoint = checkpoint;
            console.log(p);
            console.log(checkpoint);
          },
          mime: 'video/mp4'
        })
      } catch (e) {
        console.log(e);
      }
    }

    // 开始分片上传。
    multipartUpload();

    // 暂停分片上传。
    client.cancel();

    // 恢复上传。
    let resumeclient = new OSS(ossConfig);
    async function resumeUpload() {
      try {
        let result = await resumeclient.multipartUpload('02', fileObj, {
          progress: function (p, checkpoint) {
            tempCheckpoint = checkpoint;
            console.log(p);
            console.log(checkpoint);
          },
          checkpoint: tempCheckpoint,
          mime: 'video/mp4'
        })
      } catch (e) {
        console.log(e);
      }
    }
    resumeUpload();
  }

  handleChange(e) {
    e.persist();
    this.setState({ upfile: e.target.value });
  }

  render() {
    const { upfile } = this.state;
    return (
      <div>
        <script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>
        <p><input id="file" type="file" onChange={this.handleChange.bind(this)} value={upfile} /></p>
        <button onClick={this.handleUpload.bind(this)}>
          上传
        </button>
      </div>
    )
  }

}

export default Example;

文章个人博客地址:前端(react)上传到阿里云OSS存储 实例

欢迎关注公众号:程序猿布欧,不定期更新一些前端入门文章

创作不易,转载请注明出处和作者。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在React中上传文件到OSS,你需要使用OSS SDK来实现。以下是一个简单的步骤: 1. 安装OSS SDK 你可以使用npm或yarn来安装阿里云OSS SDK。在终端中输入以下命令: ``` npm install ali-oss --save ``` 2. 导入OSS SDK 在你的React组件中导入OSS SDK: ``` import OSS from 'ali-oss'; ``` 3. 创建OSS客户端 在使用OSS SDK之前,你需要创建一个OSS客户端。你需要提供你的Access Key ID、Access Key Secret和Endpoint等信息。 ``` const client = new OSS({ accessKeyId: 'your_access_key_id', accessKeySecret: 'your_access_key_secret', endpoint: 'your_endpoint', bucket: 'your_bucket_name' }); ``` 4. 上传文件 现在你可以使用OSS SDK来上传文件。以下是一个简单的示例: ``` const uploadFile = async (file) => { try { // 生成唯一的文件名 const fileName = Date.now() + '-' + file.name; // 上传文件 const result = await client.put(fileName, file); // 获取文件的URL const fileURL = result.url; // 返回文件的URL return fileURL; } catch (error) { console.log(error); throw error; } } ``` 在这个示例中,我们首先生成一个唯一的文件名,然后使用`client.put`方法来上传文件。上传成功后,我们获取文件的URL并返回它。 5. 调用上传方法 最后,在你的React组件中调用上传方法: ``` <input type="file" onChange={async (event) => { const file = event.target.files[0]; const fileURL = await uploadFile(file); console.log(fileURL); }} /> ``` 在这个示例中,我们在一个`<input>`元素的`onChange`事件中调用上传方法。当用户选择一个文件后,我们将文件传递给`uploadFile`方法,并在上传完成后打印文件的URL。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值