封装一个简单的向阿里云OSS上传文件的函数

代码

# 方法二需要安装阿里云oss前端工具库
npm install ali-oss

// 方法一
// import { Base64 } from 'js-base64';

// export async function uploadFileToAliyunOSS(
//   file: File,
//   directory?: string,
// ): Promise<{ success: boolean; error?: string }> {
//   // 阿里云 OSS 的访问凭证等信息
//   const accessid = '...';
//   const accesskey = '...';
//   const host = 'http://xxxBucketName.oss-cn-xxxplace.aliyuncs.com';

//   // 定义 Policy，限制上传文件大小和失效时间
//   const policyText = {
//     expiration: '2030-01-01T12:00:00.000Z',
//     conditions: [['content-length-range', 0, 1048576000]],
//   };

//   // 将 Policy 转换为 Base64 编码
//   const policyBase64 = Base64.encode(JSON.stringify(policyText));
//   const message = policyBase64;

//   // 使用 HMAC-SHA1 加密生成签名
//   const bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true });
//   const signature = Crypto.util.bytesToBase64(bytes);

//   // 生成文件名为 "avatar+当前日期"
//   const currentDate = new Date().toISOString().slice(0, 10).replace(/-/g, '');
//   const fileName = `avatar${currentDate}`;

//   // 创建 FormData 对象，用于存储上传文件的信息
//   const formData = new FormData();
//   formData.append('key', directory ? `${directory}/${fileName}` : fileName);
//   formData.append('OSSAccessKeyId', accessid);
//   formData.append('policy', policyBase64);
//   formData.append('success_action_status', '200');
//   formData.append('signature', signature);
//   formData.append('file', file);

//   try {
//     // 使用 fetch API 发送 POST 请求将文件上传到阿里云 OSS
//     const response = await fetch(host, {
//       method: 'POST',
//       body: formData,
//     });

//     // 检查响应是否成功，如果不成功则抛出错误
//     if (!response.ok) {
//       throw new Error('Upload failed');
//     }

//     // 返回上传成功的状态
//     return { success: true };
//   } catch (error) {
//     // 如果发生错误，则返回错误信息
//     return { success: false, error: (error as Error).message };
//   }
// }

// 方法二
import OSS from 'ali-oss';

export async function uploadFileToAliyunOSS(
  file: File,
  directory?: string,
): Promise<{ success: boolean; url?: string; error?: string }> {
  // 阿里云 OSS 的配置信息
  const client = new OSS({
    region: 'oss-cn-xxxplace',
    accessKeyId: '...',
    accessKeySecret: '...',
    bucket: 'xxxBucketName',
  });

  try {
    // 生成文件名为 "avatar + 当前时间"
    const currentDate = new Date().getTime().toString();
    const fileName = `avatar${currentDate}`;
    // 上传文件到 OSS
    const result = await client.put(
      directory ? `${directory}/${fileName}` : fileName,
      file,
    );

    // 返回上传成功的状态和 URL
    return { success: true, url: `https://xxxBucketName.oss-cn-xxxplace.aliyuncs.com/` + (directory ? `${directory}/${fileName}` : fileName) };
  } catch (error) {
    // 如果发生错误，则返回错误信息
    return { success: false, error: (error as Error).message };
  }
}