前端JS直传到OSS服务器

最新推荐文章于 2024-07-31 13:53:13 发布

原创最新推荐文章于 2024-07-31 13:53:13 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端OSS上传

js 同时被 2 个专栏收录

1 篇文章

订阅专栏

第三方

1 篇文章

订阅专栏

本文介绍了如何在前端使用JavaScript直接上传文件到阿里云OSS服务器。首先，需要引入阿里云OSS的依赖，并注意权限管理，推荐使用STS服务。接着，详细解释了相关参数设置和阿里云官方文档的引用。最后，讨论了生产环境中必不可少的跨域配置。这是一个基础实现的代码示例，供学习和交流。

部署运行你感兴趣的模型镜像

一引入阿里云OSS依赖

<script type="text/javascript" src="./aliyun-oss-sdk.min.js"></script>

二代码书写
1.云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM 子账号或STS，部署在客户端使用STS。通过STS服务，您所授权的身份主体（RAM用户、RAM用户组或RAM角色）可以获取一个自定义时效和访问权限的临时访问令牌。STS令牌持有者可以通过以下方式访问阿里云资源：通过编程方式访问被授权的阿里云服务API。登录阿里云控制台操作被授权的云资源。STS令牌生成文档：https://help.aliyun.com/document_detail/28756.html?spm=a2c4g.11186623.2.9.485d1b92875o65#reference-ong-5nv-xdb

 //初始化oss对象
 //本地测试用的自己的账号
 let client = new OSS({
 	   region: "oss-cn-hangzhou",
       accessKeyId: data.AccessKeyId,
       accessKeySecret: data.AccessKeySecret,
       bucket: data.Bucket
  });
  //生产环境建议采用stsToken方式，生成时注意设置权限及有效时间，生成方式可参考官方文档
  /*let client = new OSS({
      region: '<region>',
      accessKeyId: token.credentials.AccessKeyId,
      accessKeySecret: token.credentials.AccessKeySecret,
      stsToken: token.credentials.SecurityToken,
      bucket: '<bucket-name>'
  });*/
  
  if (!client) {
  	   this.$emit("error", { msg: "oss初始化未完成" });
      return;
  }
  
  //上传代码块
  async function multipartUpload () {
      try {
          //参数1.自定义oss存储目录+文件名；2. 文件对象
          let result = await client.multipartUpload("定义文件存储目录"+file.name, file, {
	          parallel:10,//并发上传的分片个数
	          partSize:102400,//自定义分片大小，单位字节
	          // 断点记录点。 浏览器重启后无法直接继续上传，需用户手动触发进行设置。
	          progress: async function (p, checkpoint) {
	             if(p==1){//p 上传进度0.000 -> 1 可用于做进度条处理
	              	console.log('上传成功！');
	             }
	          }
	          let head = await client.head(参数1);           
	  } catch(e){
	     // 捕获超时异常
		 if (e.code === 'ConnectionTimeoutError') {
		    console.log("Woops,超时啦!");
		  }
	     console.log('上传失败！');
	  }
}

//开始上传
multipartUpload();

2.具体参数说明可以参考阿里云文档
https://help.aliyun.com/document_detail/64047.html?spm=a2c4g.11186623.6.1236.6a7f2faaOZOmXl

3.生产环境跨域问题
使用OSS的JS SDK是需要进行跨域设置的，并且必须设置。
设置如下所示。
在这里插入图片描述
（本文展示的是处理过后的基本实现代码；水平有限，供交流分享，如有错误，还请指教，谢谢~~）