アリ雲OSSファイルのアップロード(分割アップロード、断点更新)は前後で実現されます.

阿里雲OSSについての紹介は公式文書:阿里雲OSSを参照してください.
アカウントのセキュリティを考慮して、フロントエンドがOSSサービスを使用するには、一時的なライセンスが必要です.すなわち、一時的な証明書(STS Token)を持って、aliyun-oss SDKを呼び出します.臨時授権については、RAMとSTSを参照してください.RAMサブアカウント、STSはOSSへのアクセスを一時的に許可します.
NodeJsを例にとって、後端は先端に臨時証憑を発行する実現を参考にすることができます.Node STSはアクセスを許可します.
ファイルをアリクラウドにアップロードする前の操作は参考できます.ブラウザ側でファイルをアップロードします.
これらの概念を理解した後、アリ雲OSSのコンソールに関連した設置ができます.
阿里雲OSSコンソール配置
1.Bucketを作成する
まず、私たちはブロックを作成し、ファイルを格納するコンテナを作成します.
次に、私たちはブロックにクロスドメインを設定する必要があります.このようにして、ウェブページでAliyun OSSサーバのインターフェースを呼び出すことができます.
2.RAMユーザを作成する
次に、RAMコンソールにサブアカウントと権限の設定を行います.
まず、私たちはユーザーを作成し、STSサービスAsmeRoleインターフェースを呼び出す権限をユーザーに割り当てることで、後端にSTS証明書をユーザとして前端に割り当てることができます.
私たちはこのユーザーのaccess keyとaccess key secretを保存したいです.バックエンドはこのようにユーザーの身分を確認する必要があります.
3.RAMキャラクターを作成する
このキャラクターは、フロントエンドでaliyun-oss SDKを呼び出してファイルをアップロードするユーザキャラクターです.例えば、アップロード権限しかないキャラクターを作成します.
次に私達はこの役に権限を割り当てる必要があります.権限ポリシーを作成して役に割り当てることができます.この権限ポリシーにはアップロードファイルとスライスアップロードに関する権限しか含まれていません.
戦略の具体的な内容は:

{
  "Version": "1",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "oss:PutObject",
        "oss:InitiateMultipartUpload",
        "oss:UploadPart",
        "oss:UploadPartCopy",
        "oss:CompleteMultipartUpload",
        "oss:AbortMultipartUpload",
        "oss:ListMultipartUploads",
        "oss:ListParts"
      ],
      "Resource": [
        "acs:oss:*:*:mudontire-test",
        "acs:oss:*:*:mudontire-test/*"
      ]
    }
  ]
}

次に、このポリシーをuploaderの役割に与える.
これで阿里雲OSSバックグラウンド関連配置は終了します.次に、前後の実現に注目します.
バックエンドの実現
フロントエンドでアップロードを担当していますので、バックエンドのタスクは簡単です.STS Tokenをフロントエンドに提供します.本論文はNodeJsを例にして次のように実現される.
1.aliyun-oss SDKのインストール

npm install ali-oss

2.STS Tokenを生成して戻る

const OSS = require('ali-oss');
const STS = OSS.STS;

const sts = new STS({
  accessKeyId: process.env.ALIYUN_OSS_RULE_ASSUMER_ACCESS_KEY,
  accessKeySecret: process.env.ALIYUN_OSS_RULE_ASSUMER_ACCESS_KEY_SECRET
});

async function getCredential(req, res, next) {
  try {
    const { credentials } = await sts.assumeRole(
      'acs:ram::1582938330607257:role/uploader',  // role arn
      null, // policy
      15 * 60, // expiration
      'web-client' // session name
    );
    req.result = credentials;
    next();
  } catch (err) {
    next(err);
  }
}

ここで、access keyとaccess key secretは.envファイルに保存されている.sts.assumeRole()はSTS Tokenで戻り、方法受信の4つのパラメータは、それぞれ、role arn、policy、expiration、session nameである.
Role arnは、RAMキャラクターの詳細ページから取得することができる.
Policyは、キャラクターに権限ポリシーが追加されているので、カスタムポリシーです.
ExpirationはSTS Tokenの期限が切れた時間で、15 min～60 minの間にあるべきです.Tokenが失効すると先端が再取得されます.
セッション名をカスタマイズします.
バックエンドの実現が完了しました.
先端実装
本論文のフロントエンドでは、元のJSを使用することができます.また、ant design proのバージョンもありますので、githubプロジェクトを参照してください.
先端実装にはいくつかのポイントがあります.

.aliyun-oss SDKを呼び出す前にSTS Token

を取得する.

はアップロードスライスサイズを定義し、ファイルがスライスサイズより小さい場合は通常アップロードを使用します.そうでなければ、スライスアップロード

を使用します.

アップロード中にアップロードの進捗を示すことができます.

アップロード中、STS Tokenがもうすぐ期限が切れると、アップロードを一時停止してTokenを再取得し、その後、ブレークポイント継続

を行う.

は、手動一時停止、続伝機能

をサポートしています.

アップロードが完了したら、ファイルに対応するダウンロードアドレス

に戻ります.
1.aliyun-oss SDKの導入
参考aliyun-oss SDK導入
2.HTML
HTMLにはファイル選択器が含まれています.アップロード、一時停止、継続ボタン、状態表示:

  
  Upload
  Stop
  resume
  

3.変数の定義

let credentials = null; // STS  
let ossClient = null; // oss     
const fileInput = document.getElementById('fileInput'); //      
const status = document.getElementById('status'); //       
const bucket = 'mudontire-test'; // bucket  
const region = 'oss-cn-shanghai'; // oss      
const partSize = 1024 * 1024; //       (byte)
const parallel = 3; //         
const checkpoints = {}; //             

4.STS証明書を取得し、OSS Clientを作成する

//   STS Token
function getCredential() {
  return fetch('http://localhost:5050/api/upload/credential')
    .then(res => {
      return res.json()
    })
    .then(res => {
      credentials = res.result;
    })
    .catch(err => {
      console.error(err);
    });
}

//   OSS Client
async function initOSSClient() {
  const { AccessKeyId, AccessKeySecret, SecurityToken } = credentials;
  ossClient = new OSS({
    accessKeyId: AccessKeyId,
    accessKeySecret: AccessKeySecret,
    stsToken: SecurityToken,
    bucket,
    region
  });
}

5.アップロードボタンイベントをクリックする

async function upload() {
  status.innerText = 'Uploading';
  //   STS Token
  await getCredential();
  const { files } = fileInput;
  const fileList = Array.from(files);
  const uploadTasks = fileList.forEach(file => {
    //             ，      ，        
    if (file.size < partSize) {
      commonUpload(file);
    } else {
      multipartUpload(file);
    }
  });
}

6.一般アップロード

//     
async function commonUpload(file) {
  if (!ossClient) {
    await initOSSClient();
  }
  const fileName = file.name;
  return ossClient.put(fileName, file).then(result => {
    console.log(`Common upload ${file.name} succeeded, result === `, result)
  }).catch(err => {
    console.log(`Common upload ${file.name} failed === `, err);
  });
}

7.スライスアップロード

//     
async function multipartUpload(file) {
  if (!ossClient) {
    await initOSSClient();
  }
  const fileName = file.name;
  return ossClient.multipartUpload(fileName, file, {
    parallel,
    partSize,
    progress: onMultipartUploadProgress
  }).then(result => {
    //         
    const url = `http://${bucket}.${region}.aliyuncs.com/${fileName}`;
    console.log(`Multipart upload ${file.name} succeeded, url === `, url)
  }).catch(err => {
    console.log(`Multipart upload ${file.name} failed === `, err);
  });
}

9.断点更新

//     
async function resumeMultipartUpload() {
  Object.values(checkpoints).forEach((checkpoint) => {
    const { uploadId, file, name } = checkpoint;
    ossClient.multipartUpload(uploadId, file, {
      parallel,
      partSize,
      progress: onMultipartUploadProgress,
      checkpoint
    }).then(result => {
      console.log('before delete checkpoints === ', checkpoints);
      delete checkpoints[checkpoint.uploadId];
      console.log('after delete checkpoints === ', checkpoints);
      const url = `http://${bucket}.${region}.aliyuncs.com/${name}`;
      console.log(`Resume multipart upload ${file.name} succeeded, url === `, url)
    }).catch(err => {
      console.log('Resume multipart upload failed === ', err);
    });
  });
}

10.スライスアップロードの進捗
progressフィードバックではSTS Tokenがもうすぐ期限が切れるかどうかを判断できます.もし期限が切れたら、先にアップロードをキャンセルして新しいTokenを取得してから、前のブレークポイントから継続します.

//           
async function onMultipartUploadProgress(progress, checkpoint) {
  console.log(`${checkpoint.file.name}      ${progress}`);
  checkpoints[checkpoint.uploadId] = checkpoint;
  //   STS Token      ，       
  const { Expiration } = credentials;
  const timegap = 1;
  if (Expiration && moment(Expiration).subtract(timegap, 'minute').isBefore(moment())) {
    console.log(`STS token will expire in ${timegap} minutes，uploading will pause and resume after getting new STS token`);
    if (ossClient) {
      ossClient.cancel();
    }
    await getCredential();
    await resumeMultipartUpload();
  }
}

11.一時停止、継続ボタンクリックイベント

//     
function stop() {
  status.innerText = 'Stopping';
  if (ossClient) ossClient.cancel();
}

//   
function resume() {
  status.innerText = 'Resuming';
  if (ossClient) resumeMultipartUpload();
}

githubの例項目
プロジェクトの住所:https://github.com/MudOnTire/....皆さんに助けがあれば、スターさん、助けてください.