乐趣区

关于react.js:前端react上传到阿里云OSS存储-实例

jiezi

需要背景

因为现有的后盾管理系统，上传的视频越来越大，加上上传视频较慢，后端小哥提出间接从前端上传视频或者其余文件到阿里云 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 存储 实例

退出移动版