【避坑指“难”】React实现阿里云oss上传文件代码示例

最新推荐文章于 2025-04-04 20:22:18 发布

椰卤工程师

最新推荐文章于 2025-04-04 20:22:18 发布

阅读量876

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 超级避坑指难前端开发文章标签： react oss 文件上传

本文链接：https://blog.youkuaiyun.com/weixin_42224055/article/details/120686394

在utils中封装下列方法

oss基础配置

export const ossConfig = () => {
   
   
  return {
   
   
    OSSAccessKeyId: '你的OSSAccessKeyId',
    AccessKeySecret: '你的AccessKeySecret',
    expire: 87600 //过期时间
  }

上传文件的方法

export const uploadFile=(file:any)=>{
   
   
  const OSSAccessKeyId = ossConfig().OSSAccessKeyId;
  const host = ossConfig().host;
  const hostAddr = ossConfig().hostAddr;
  const policy = getPolicyBase64(); 
  const signature = getSignature(policy);
  const expire = ossConfig().expire;
  const filename = file.name;
  var dataFrame = {
   
   
    OSSAccessKeyId: OSSAccessKeyId,
    host: host,
    hostAddr:hostAddr,
    policy: policy,
    signature: signature,
    expire: expire,
    filename: filename,
    dir: "notarization/", //oss文件夹名称
  };
  uploadAvatarAliyun(dataFrame, file).then((u