react/vue中使用Bos(百度@baiducloud/sdk)直接通过putObjectFromBlob上传

难点：其实也不难，只不过没做过

知识点：Bos(百度@baiducloud/sdk)直接上传（vue同理）点击这里查看官网文档

1.还是先下载依赖

pnpm install -D @baiducloud/sdk crypto-js

2.先写一个解密方法

import * as CryptoJS from "crypto-js";

const deCodeStr = (str, key) => {
  let dec = CryptoJS.AES.decrypt(
    CryptoJS.enc.Base64.stringify(CryptoJS.enc.Hex.parse(str)),
    CryptoJS.enc.Utf8.parse(key),
    {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7,
    }
  );
  return CryptoJS.enc.Utf8.stringify(dec);
};

3.然后就可以走上传了

import { BosClient } from "@baiducloud/sdk";

// 这里需要传入两个参数 permits：上传相关信息加密后的一串码 psw：解这个码的密码
let uploadObj = JSON.parse(deCodeStr(permits, psw)); // deCodeStr为上方解密的方法

// 这里一般使用env判断一下环境，没有授权跨域的，开发时需要代理一下，生产环境的地址一般情况下从uploadObj中拿，当然你要乐意写死也行
let endPoint = "上传的https地址"; 

//配置参数
let config = {
  endpoint: endPoint, //传入Bucket所在区域域名
  credentials: {
    ak: uploadObj.accessKey, //您的AccessKey
    sk: uploadObj.secretKey, //您的SecretAccessKey
  },
};

// 创建对象
let client = new BosClient(config);

// 上传即可 使用的是putObjectFromBlob 这里的file即为文件
client.putObjectFromBlob(
  uploadObj.bucketName,
  uploadObj.objectDir + "/" + file.name,
  file
)
.then((res) => done(res))
.catch((err) => fail(err));

const done = () => {
  // 成功回调
}

const fail = () => {
  // 失败回调
}

4.大功告成，这是使用sdk直接上传的，如果在微信小程序中呢，sdk貌似不兼容，又或者不想用sdk，这里推荐大家使用postObject接口上传，可以查看下方文章，也是我实操过的，如果有问题，欢迎评论和私信，有更好的方法也希望指点一下，大家共同学习，共同成长！

trao(react/微信小程序)中通过uploadFile调用Bos(PostObject)直接上传