阿里云OSS上传-RN采用PostObject方式

import ReactNativeBlobUtil from 'react-native-blob-util';

import { showLoading } from '@/libs/overlay/loading';
import { showToast } from '@/libs/overlay/toast';

import { getVideoUrl, handleIosFilePath, normalizeOptions, resolveFileName } from './util';

import type { AliOSSResp, BaseResponse, OSSConfig, UploadToOSSParams } from './types';

export async function uploadToOSS(params: UploadToOSSParams) {
  const opt = normalizeOptions({});
  let closeLoading: (() => void) | undefined;
  if (opt.showLoading) {
    closeLoading = showLoading().close;
  }

  try {
    const { request, response } = await upload(params);
    if (response?.status !== 200) {
      throw new Error('文件上传失败');
    }
    if (opt.showLoading) {
      closeLoading?.();
    }
    if (opt.showSuccessToast) {
      showToast('文件上传成功');
    }
    return getVideoUrl(request.url, request.fileName);
  } catch (error: any) {
    if (opt.showLoading) {
      closeLoading?.();
    }
    if (opt.showErrorToast) {
      const message = error.msg || error.message;
      showToast(message || '文件上传失败');
    }
    throw error;
  }
};

function upload(
  params: UploadToOSSParams,
): Promise<{ request: { url: string; fileName: string }; response: BaseResponse }> {
  const { accessid, policy, signature, host, dir } = params.config as OSSConfig;
  const { url, size } = params.videoFile;
  const { progress } = params;
  const ossHost = `https://${host}`;
  const targetUrl = handleIosFilePath(url);
  const fileName = resolveFileName(targetUrl, dir);

  return new Promise((resolve, reject) => {
    ReactNativeBlobUtil.fetch(
      'POST',
      ossHost,
      {},
      [
        { name: 'key', data: fileName },
        { name: 'OSSAccessKeyId', data: accessid },
        { name: 'policy', data: policy },
        { name: 'signature', data: signature },
        { name: 'success_action_status', data: '200' },
        {
          name: 'file',
          filename: fileName,
          data: ReactNativeBlobUtil.wrap(targetUrl),
        },
      ],
    ).uploadProgress((written, total) => {
      progress?.({
        progress: Math.round((written / total) * 100),
        totalBytesSent: written,
        totalBytesExpectedToSend: total,
      });
    }).then((res) => {
      progress?.({
        progress: 100,
        totalBytesSent: Number(size || 0),
        totalBytesExpectedToSend: Number(size || 0),
      });
      const _res = (res as unknown as AliOSSResp)?.respInfo || {};
      const response: BaseResponse = {
        ok: _res?.status >= 200 && _res.status <= 299,
        status: _res?.status,
        headers: _res?.headers,
        body: _res?.data,
      };
      if (!response.ok) {
        reject(new Error('文件上传失败'));
      }
      resolve({ request: { url: ossHost, fileName }, response });
    }).catch((err) => {
      reject(err);
    });
  });
}

Alioss SDK 上传

import OSS from 'ali-oss';

import { showLoading } from '@/libs/overlay/loading';
import { showToast } from '@/libs/overlay/toast';

import { getVideoUrl, normalizeOptions, resolveFileName } from './util';

import type { OSSRNConfig, UploadToOSSAppParams } from './types';

const OSS_REGION = 'cn-beijing';
const PART_SIZE = 1 * 1024 * 1024;
const RETRY_COUNT_MAX = 3;

export async function uploadToOSS(params: UploadToOSSAppParams) {
  const opt = normalizeOptions({});
  let closeLoading: (() => void) | undefined;
  if (opt.showLoading) {
    closeLoading = showLoading().close;
  }

  try {
    const { request, response } = await upload(params);
    if (response?.status !== 200) {
      throw new Error('文件上传失败');
    }
    if (opt.showLoading) {
      closeLoading?.();
    }
    if (opt.showSuccessToast) {
      showToast('文件上传成功');
    }
    return getVideoUrl(request.url, request.fileName);
  } catch (error: any) {
    if (opt.showLoading) {
      closeLoading?.();
    }
    if (opt.showErrorToast) {
      const message = error.msg || error.message;
      showToast(message || '文件上传失败');
    }
    throw error;
  }
};

async function getOssClient(config: OSSRNConfig) {
  const {
    AccessKeyId,
    AccessKeySecret,
    BucketName,
    Endpoint,
    SecurityToken,
  } = config;
  return new OSS({
    region: OSS_REGION,
    accessKeyId: AccessKeyId,
    accessKeySecret: AccessKeySecret,
    stsToken: SecurityToken,
    bucket: BucketName,
    endpoint: Endpoint,
  });
}

function upload(
  params: UploadToOSSAppParams,
) {
  let retryCount = 0;
  let currentCheckpoint;
  async function doUpload() {
    const { Endpoint, UploadDir, BucketName } = params.config as OSSRNConfig;
    const { url } = params.videoFile;
    const { progress } = params;
    const ossHost = `https://${BucketName}.${Endpoint}`;
    const fileName = resolveFileName(url, UploadDir);

    const uploadFileClient = await getOssClient(params.config as OSSRNConfig);

    const options = {
      progress: (p, checkpoint) => {
        currentCheckpoint = checkpoint;
        progress?.({
          progress: Math.round(p * 100),
          totalBytesSent: 0,
          totalBytesExpectedToSend: 0,
        });
      },
      partSize: PART_SIZE,
      timeout: 120000,
      checkpoint: undefined,
    };
    if (currentCheckpoint) {
      options.checkpoint = currentCheckpoint;
    }
    try {
      const file = await convertObjectUrlToBlob(url);
      const result = await uploadFileClient.multipartUpload(fileName, file, options);
      currentCheckpoint = null;
      const response = {
        ok: result?.res?.status >= 200 && result?.res?.status <= 299,
        status: result?.res?.status,
        headers: result?.res?.headers,
        body: result?.data,
      };
      if (!response.ok) {
        throw new Error('文件上传失败');
      }
      return { request: { url: ossHost, fileName }, response };
    } catch (err: any) {
      if (typeof err?.name === 'string' && err.name.toLowerCase().indexOf('connectiontimeout') !== -1) {
        if (retryCount < RETRY_COUNT_MAX) {
          retryCount++;
          console.error(`Upload failed, retrying ${retryCount}`);
          return doUpload();
        }
      }
      throw err;
    }
  }
  return doUpload();
};

function convertObjectUrlToBlob(url: string) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.withCredentials = true;
    xhr.onload = function () {
      if (this.status === 200) {
        resolve(this.response);
      } else {
        /* eslint-disable prefer-promise-reject-errors */
        reject({ status: this.status });
      }
    };
    xhr.send();
  });
};

AWS S3 SDK 上传RN

import ReactNativeBlobUtil from 'react-native-blob-util';
import 'react-native-get-random-values';

import {
  AbortMultipartUploadCommand,
  CompleteMultipartUploadCommand,
  CreateMultipartUploadCommand,
  S3Client,
  UploadPartCommand,
} from '@aws-sdk/client-s3';

import { showLoading } from '@/libs/overlay/loading';
import { showToast } from '@/libs/overlay/toast';

import { getVideoUrl, handleIosFilePath, normalizeOptions, resolveFileName } from './util';

import type { BaseResponse, OSSRNConfig, UploadToOSSAppParams } from './types';
import type { CompleteMultipartUploadCommandOutput } from '@aws-sdk/client-s3';

const OSS_REGION = 'cn-beijing';
const PART_SIZE = 1 * 1024 * 1024; // 1MB per part

export async function uploadToOSS(params: UploadToOSSAppParams) {
  const opt = normalizeOptions({});
  let closeLoading: (() => void) | undefined;
  if (opt.showLoading) {
    closeLoading = showLoading().close;
  }

  try {
    const { request, response } = await upload(params);
    if (response?.status !== 200) {
      throw new Error('文件上传失败');
    }
    if (opt.showLoading) {
      closeLoading?.();
    }
    if (opt.showSuccessToast) {
      showToast('文件上传成功');
    }
    return getVideoUrl(request.url, request.fileName);
  } catch (error: any) {
    if (opt.showLoading) {
      closeLoading?.();
    }
    if (opt.showErrorToast) {
      const message = error.msg || error.message;
      showToast(message || '文件上传失败');
    }
    throw error;
  }
}

function getS3Client(config: OSSRNConfig) {
  const {
    Endpoint,
    AccessKeyId,
    AccessKeySecret,
    SecurityToken,
  } = config;
  return new S3Client({
    region: OSS_REGION,
    endpoint: `https://${Endpoint}`,
    credentials: {
      accessKeyId: AccessKeyId,
      secretAccessKey: AccessKeySecret,
      sessionToken: SecurityToken,
    },
  });
}

async function upload(params: UploadToOSSAppParams) {
  const { videoFile, config, progress } = params;
  const { BucketName, UploadDir, Endpoint } = config as OSSRNConfig;
  const filePath = videoFile.url;
  const targetUrl = handleIosFilePath(filePath);
  const totalSize = videoFile.size as number;
  const ossHost = `https://${BucketName}.${Endpoint}`;

  const s3Client = getS3Client(config as OSSRNConfig);
  const fileName = resolveFileName(targetUrl, UploadDir);

  const initResult = await s3Client.send(
    new CreateMultipartUploadCommand({
      Bucket: BucketName,
      Key: fileName,
    }),
  );

  const uploadId = initResult.UploadId;
  if (!uploadId) {
    throw new Error('Failed to initialize multipart upload');
  }

  const uploadPromises: Promise<void>[] = [];
  const uploadedParts: { ETag?: string; PartNumber: number }[] = [];
  let loadedBytes = 0;
  let partNumber = 1;

  try {
    const stream = await ReactNativeBlobUtil.fs.readStream(targetUrl, 'ascii', PART_SIZE);
    stream.open();

    const metaData = await new Promise<CompleteMultipartUploadCommandOutput>((resolve, reject) => {
      stream.onData(async (chunk) => {
        const currentPartNumber = partNumber++;
        uploadPromises.push(
          (async () => {
            const uint8Array = new Uint8Array(chunk as number[]);
            const result = await s3Client.send(
              new UploadPartCommand({
                Bucket: BucketName,
                Key: fileName,
                UploadId: uploadId,
                PartNumber: currentPartNumber,
                Body: uint8Array,
              }),
            );

            loadedBytes += uint8Array.byteLength;
            uploadedParts.push({
              ETag: result.ETag,
              PartNumber: currentPartNumber,
            });

            progress?.({
              progress: Math.round((loadedBytes / totalSize) * 100),
              totalBytesSent: loadedBytes,
              totalBytesExpectedToSend: totalSize,
            });
          })(),
        );
      });

      stream.onEnd(async () => {
        try {
          await Promise.all(uploadPromises);
          uploadedParts.sort((a, b) => a.PartNumber - b.PartNumber);

          const result = await s3Client.send(
            new CompleteMultipartUploadCommand({
              Bucket: BucketName,
              Key: fileName,
              UploadId: uploadId,
              MultipartUpload: {
                Parts: uploadedParts.map(({ ETag, PartNumber }) => ({
                  ETag,
                  PartNumber,
                })),
              },
            }),
          );

          progress?.({
            progress: 100,
            totalBytesSent: loadedBytes,
            totalBytesExpectedToSend: totalSize,
          });

          resolve(result);
        } catch (err) {
          reject(err);
        }
      });

      stream.onError((err) => {
        reject(err);
      });
    });
    const { $metadata } = metaData;
    const httpStatusCode = $metadata?.httpStatusCode as number;
    const response: BaseResponse = {
      ok: httpStatusCode >= 200 && httpStatusCode <= 299,
      status: httpStatusCode,
      headers: {},
      body: metaData.Location,
    };
    if (!response.ok) {
      throw new Error('文件上传失败');
    }
    return { request: { url: ossHost, fileName }, response };
  } catch (err) {
    await s3Client.send(
      new AbortMultipartUploadCommand({
        Bucket: BucketName,
        Key: fileName,
        UploadId: uploadId,
      }),
    );
    throw err;
  }
};

AWS S3 SDK 上传 H5

import {
  AbortMultipartUploadCommand,
  CompleteMultipartUploadCommand,
  CreateMultipartUploadCommand,
  S3Client,
  UploadPartCommand,
} from '@aws-sdk/client-s3';

import { showLoading } from '@/libs/overlay/loading';
import { showToast } from '@/libs/overlay/toast';

import { getVideoUrl, normalizeOptions, resolveFileName } from './util';

import type { BaseResponse, OSSRNConfig, UploadToOSSAppParams } from './types';

const OSS_REGION = 'cn-beijing';
const PART_SIZE = 1 * 1024 * 1024;

export async function uploadToOSS(params: UploadToOSSAppParams) {
  const opt = normalizeOptions({});
  let closeLoading: (() => void) | undefined;
  if (opt.showLoading) {
    closeLoading = showLoading().close;
  }

  try {
    const { request, response } = await upload(params);
    if (response?.status !== 200) {
      throw new Error('文件上传失败');
    }
    if (opt.showLoading) {
      closeLoading?.();
    }
    if (opt.showSuccessToast) {
      showToast('文件上传成功');
    }
    return getVideoUrl(request.url, request.fileName);
  } catch (error: any) {
    if (opt.showLoading) {
      closeLoading?.();
    }
    if (opt.showErrorToast) {
      const message = error.msg || error.message;
      showToast(message || '文件上传失败');
    }
    throw error;
  }
}

function getS3Client(config: OSSRNConfig) {
  const {
    Endpoint,
    AccessKeyId,
    AccessKeySecret,
    SecurityToken,
  } = config;
  return new S3Client({
    region: OSS_REGION,
    endpoint: `https://${Endpoint}`,
    credentials: {
      accessKeyId: AccessKeyId,
      secretAccessKey: AccessKeySecret,
      sessionToken: SecurityToken,
    },
  });
}

async function upload(params: UploadToOSSAppParams) {
  const { videoFile, config, progress } = params;
  const { BucketName, UploadDir, Endpoint } = config as OSSRNConfig;
  const filePath = videoFile.url;
  const fileName = resolveFileName(filePath, UploadDir);
  const ossHost = `https://${BucketName}.${Endpoint}`;
  const file = await convertObjectUrlToBlob(filePath);
  const s3Client = getS3Client(config as OSSRNConfig);
  const totalSize = file.size;
  const totalParts = Math.ceil(totalSize / PART_SIZE);

  let loadedBytes = 0;
  const initResult = await s3Client.send(
    new CreateMultipartUploadCommand({
      Bucket: BucketName,
      Key: fileName,
      ContentType: file.type,
    }),
  );

  const uploadId = initResult.UploadId;
  if (!uploadId) {
    throw new Error('Failed to initialize multipart upload');
  }
  try {
    const uploadPromises: Promise<void>[] = [];
    const uploadedParts: { ETag?: string; PartNumber: number }[] = [];

    for (let i = 0; i < totalParts; i++) {
      const start = i * PART_SIZE;
      const end = Math.min(start + PART_SIZE, totalSize);
      const chunk = file.slice(start, end);
      const chunkBuffer = await chunk.arrayBuffer();
      const uint8Array = new Uint8Array(chunkBuffer);

      uploadPromises.push(
        (async () => {
          const result = await s3Client.send(
            new UploadPartCommand({
              Bucket: BucketName,
              Key: fileName,
              UploadId: uploadId,
              PartNumber: i + 1,
              Body: uint8Array,
            }),
          );

          loadedBytes += uint8Array.byteLength;
          uploadedParts.push({
            ETag: result.ETag,
            PartNumber: i + 1,
          });

          progress?.({
            progress: Math.round((loadedBytes / totalSize) * 100),
            totalBytesSent: loadedBytes,
            totalBytesExpectedToSend: totalSize,
          });
        })(),
      );
    }

    await Promise.all(uploadPromises);
    uploadedParts.sort((a, b) => a.PartNumber - b.PartNumber);

    const metaData = await s3Client.send(
      new CompleteMultipartUploadCommand({
        Bucket: BucketName,
        Key: fileName,
        UploadId: uploadId,
        MultipartUpload: {
          Parts: uploadedParts.map(({ ETag, PartNumber }) => ({
            ETag,
            PartNumber,
          })),
        },
      }),
    );

    progress?.({
      progress: 100,
      totalBytesSent: loadedBytes,
      totalBytesExpectedToSend: totalSize,
    });

    const { $metadata } = metaData;
    const httpStatusCode = $metadata?.httpStatusCode as number;
    const response: BaseResponse = {
      ok: httpStatusCode >= 200 && httpStatusCode <= 299,
      status: httpStatusCode,
      headers: {},
      body: metaData.Location,
    };
    if (!response.ok) {
      throw new Error('文件上传失败');
    }
    return { request: { url: ossHost, fileName }, response };
  } catch (err) {
    if (uploadId) {
      await s3Client.send(
        new AbortMultipartUploadCommand({
          Bucket: BucketName,
          Key: fileName,
          UploadId: uploadId,
        }),
      );
    }

    throw err;
  }
};

function convertObjectUrlToBlob(url: string): Promise<Blob> {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.withCredentials = true;
    xhr.onload = function () {
      if (this.status === 200) {
        resolve(this.response);
      } else {
        /* eslint-disable prefer-promise-reject-errors */
        reject({ status: this.status });
      }
    };
    xhr.send();
  });
};

AWS S3 PostObject WEB

import { upload as doUpload } from '@/libs/net/upload';
import { showLoading } from '@/libs/overlay/loading';
import { showToast } from '@/libs/overlay/toast';

import { getVideoUrl, normalizeOptions, resolveFileName } from './util';

import type { OSSConfig, OssServiceOptions, UploadToOSSParams } from './types';

export async function uploadToOSS(params: UploadToOSSParams) {
  const { accessid, policy, signature, host, dir } = params.config as OSSConfig;
  const { videoFile, progress } = params;
  const { url } = videoFile || {};
  const fileName = resolveFileName(url, dir);
  const resp = await upload(`https://${host}`, {
    filePath: url,
    fileName,
    extraParams: {
      key: fileName,
      OSSAccessKeyId: accessid,
      policy,
      signature,
      success_action_status: '200',
    },
    progress,
  });
  return resp;
};

async function upload(
  url: string,
  options: OssServiceOptions,
) {
  const opt = normalizeOptions(Object.assign(options, { name: 'file' }));

  let closeLoading: (() => void) | undefined;
  if (opt.showLoading) {
    closeLoading = showLoading().close;
  }

  try {
    const { response } = await doUpload(url, opt);
    if (response?.status !== 200) {
      throw new Error('文件上传失败');
    }
    if (opt.showLoading) {
      closeLoading?.();
    }
    if (opt.showSuccessToast) {
      showToast('文件上传成功');
    }
    return getVideoUrl(url, opt.fileName);
  } catch (error: any) {
    if (opt.showLoading) {
      closeLoading?.();
    }
    if (opt.showErrorToast) {
      const message = error.msg || error.message;
      showToast(message || '文件上传失败');
    }
    throw error;
  }
}