前端对接阿里oss保姆级教程(第二章使用武器)

1.在前端项目下载ali-oss

复制代码
yarn add ali-oss

2.编写上传方法

TypeScript 复制代码
const OSS = require('ali-oss')

const client = new OSS({
    // 填写Bucket所在地域。我的杭州的,Region填写为oss-cn-hangzhou。
    region: 'oss-cn-hangzhou',
    //填写组件的密钥
    accessKeyId: '',
    accessKeySecret: '',
    // 填写Bucket名称。
    bucket: '填写自己的名称',
  });


/**
 * 
 * @param {object}   file file文件对象
 * 
 */   
  function uploadFile(file :any){

     
      return new Promise((resolve,reject) =>{
        
        //获取文件类型
        let fileType = file.type.split('/')[1];
        // 制作文件名
        let fileName = new Date().getTime() + Math.floor(Math.random() * 150) + '.'+fileType;
        // 上传
        client.multipartUpload(fileName, file).then((result:any) =>{
            
           
       //path就是Bucket 域名  Bucket 域名+返回的文件名称
			const path  = 'Bucket 域名'+result.name
           resolve(path)
        }).catch((err:any) =>{
            reject(err)
        })
            

      })
  }
  
export default uploadFile; 

提示(Bucket 域名)的位置

密钥的位置

相关推荐
中文呀8 小时前
三维 GIS 离线缓存实战:逆向 CesiumOfflineCache,并亲手为它补上"自动更新"能力
前端
前进前进前进9 小时前
TRAE 全链路实战:做了一个警示牌一键生成器:纯 Canvas、单文件、零依赖
前端
小万74210 小时前
God‘s Eye View 深度解析:15 路公开信号 + CesiumJS 的浏览器级 OSINT 控制台,60 帧渲染的“真实间谍卫星模拟器”
前端
IT星宿10 小时前
浏览器标签页全是一个图标:我用名字哈希生成 favicon,让每个项目都有身份标识
前端
全栈项目管理程序猿10 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
拖孩12 小时前
AI 帮我写的小程序「厨菜记」上线满月了,挣了两百块!!!
前端·后端·微信小程序
用户3600555790012 小时前
Kestrel_VLLM - 13 · 为什么排除 MoE FFN Tiling 与 Tensor Core
前端
Hilaku12 小时前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding12 小时前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
小羊没烦恼!13 小时前
Ajax与JSON的一些总结
android·java·前端·数据库·mysql·算法·okhttp