难点:其实也不难,只不过没做过

知识点: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)直接上传

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐