vue3使用阿里oss上传资源(上传图片、视频、文件、pdf等等),删除oss资源。获取STS token的接口

本文介绍了如何在Vue3项目中通过阿里OSSSDK实现文件上传、获取STSToken以及资源的删除。提供了初始化OSSClient实例和处理文件上传的示例代码。
摘要由CSDN通过智能技术生成

vue3使用阿里oss上传资源

全部oss.ts代码如下:

import OSS from "ali-oss";

// 获取STS token
export const getSTSToken = async () => {
  const STS_TOKEN_URL = "....."; // 获取STS token的接口,后端提供
  // fetch方式可按需更换成axios
  const res = await fetch(STS_TOKEN_URL).then(res => res.json());
  const { stsToken, accessKeySecret, accessKeyId } = res.data || {};
  return {
    stsToken,
    accessKeySecret,
    accessKeyId
  };
};

// 初始化OSS client实例
export const initOSSClient = async () => {
  const token = await getSTSToken();
  // 可按需选择是挂载在window 还是其他变量上
  window.globalOSSClient = new OSS({
    region: "xxxxxxxx", //根据那你的Bucket地点来填写
    accessKeyId: token.accessKeyId, //自己账户的accessKeyId,这里getSTSToken通过后端获取
    accessKeySecret: token.accessKeySecret, //自己账户的accessKeySecret,这里getSTSToken通过后端获取
    stsToken: token.stsToken, // stsToken,这里getSTSToken通过后端获取
    refreshSTSToken: async () => {
      const tokenInfo = await getSTSToken();
      return tokenInfo;
    },
    // 刷新临时访问凭证的时间间隔,单位为毫秒。
    refreshSTSTokenInterval: 300000,
    bucket: "xxxxxxx" //bucket名字
    //secure: true, // 上传链接返回支持https
  });
};
// 删除oss的资源
export const delOSSUrl = url => {
  if (!url) return;
  const defaulUrl = new URL(url).origin + "/";
  const urlNew = url.replace(defaulUrl, "");
  window.globalOSSClient.delete(urlNew).then(res => {
    console.log("res", res);
  });
};
  1. 采用SDK的方法,先npm i ali-oss安装oss。

  2. 进入项目或者页面时,调用initOSSClient方法,初始化OSS client实例,从而获取STS token

  3. 当通过vantui或者elementui,或者其他方式拿到文件的file时,调用window.globalOSSClient.put(fileName, file)即可。

// 使用上传oss的页面
<script setup lang="ts" name="Tools">
import { onBeforeMount } from "vue";
import { initOSSClient, delOSSUrl } from "@/utils/oss.ts";
onBeforeMount(() => {
	//初始化OSS client实例
	initOSSClient();
});
// 需要上传的时候,调用
const putFileToOss= fileObj => {
  const { file } = fileObj;
  window.globalOSSClient
    .put(file.name, file)
    .then(res => {
      console.log("oss-res", res);
      const { url } = res;
      if (url) {
        userInfo.value.certificateImgs.push(url);
      }
    })
    .catch(() => {
      console.log("oss服务错误");
    });
};
// 在需要替换逻辑,或者删除逻辑的时候,记得调用delOSSUrl,删除oss上的资源
// delOSSUrl(url)
//
</script>
  • 8
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3是一种流行的JavaScript框架,用于构建用户界面。它具有响应式数据绑定、组件化开发和虚拟DOM等特性,使得开发者可以更高效地构建交互式的Web应用程序。 要在Vue3中实现上传图片阿里OSS,你可以按照以下步骤进行操作: 1. 安装依赖:首先,你需要安装阿里OSSJavaScript SDK。可以使用npm或yarn命令来安装,例如: ``` npm install ali-oss ``` 2. 配置OSS客户端:在Vue3的代码中,你需要创建一个OSS客户端实例,并配置相关参数,如AccessKeyId、AccessKeySecret、Endpoint等。这些参数可以在阿里OSS控制台中获取。 3. 创建上传组件:在Vue3中,你可以创建一个上传组件,用于选择图片文件并触发上传操作。可以使用`<input type="file">`元素来实现文件选择功能,并监听其`change`事件。 4. 上传图片:在上传组件中,你可以编写上传图片的逻辑。当用户选择了图片文件后,你可以通过OSS客户端调用`put`方法来上传图片文件阿里OSS。 下面是一个简单的示例代码,演示了如何在Vue3中上传图片阿里OSS: ```javascript <template> <div> <input type="file" @change="handleFileChange"> </div> </template> <script> import OSS from 'ali-oss'; export default { methods: { handleFileChange(event) { const file = event.target.files[0]; const client = new OSS({ accessKeyId: 'your-access-key-id', accessKeySecret: 'your-access-key-secret', bucket: 'your-bucket-name', region: 'your-oss-region', // 其他配置参数... }); // 生成唯一的文件名 const fileName = Date.now() + '-' + file.name; // 调用OSS客户端的put方法上传文件 client.put(fileName, file).then(response => { console.log('上传成功', response); // 在这里可以处理上传成功后的逻辑 }).catch(error => { console.error('上传失败', error); // 在这里可以处理上传失败后的逻辑 }); } } } </script> ``` 请注意,上述代码中的`your-access-key-id`、`your-access-key-secret`、`your-bucket-name`和`your-oss-region`需要替换为你自己的阿里OSS相关信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

回忆哆啦没有A梦

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值