web端上传静态资源至阿里云OSS

本文介绍如何通过JavaScript客户端和小程序实现阿里云OSS的静态资源上传,重点在于服务端签名后的安全直传。分别讲解了JavaScript利用plupload库的直传方法,以及小程序使用wx.uploadfile() API的上传流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

鉴于安全性,本文采用的是服务端签名后直传方式。
本文分为两部分讲解:

  1. JavaScript客户端签名直传
  2. 小程序签名直传

服务端签名后直传 — 官方文档

服务端签名后直传

一、JavaScript客户端签名直传

上传中使用了 plupload. 详见plupload官方文档
阿里云 JavaScript客户端签名直传 官方文档

本文中的代码是经过删改过后的代码,若想看完整的具体代码,请点击:
阿里官方客户端代码 下载

// html部分
<div id="upload-container">
  <div id="upload-monitor">
      <span>上传</span>
  </div>
</div>

// 代码中使用的Base64、Crypto、plupload在官方客户端代码中均有
var fileName = ''; // 上传的文件名称。可以使用原本的文件名称,也可以使用随机的文件名(自由发挥)
var accessid = ''; // 记录请求后端接口获取到的阿里的accessid
var accesskey = ''; // 记录请求后端接口获取到的阿里的accesskey
var token = ''; // 记录请求后端接口获取到的阿里的token
var host = 'http://xxx.xxx.aliyuncs.com'; // OSS访问域名
var policyBase64 = ''; // 上传文件时所需要的policy
var signature = ''; // 签名
var uploadConfig = {
   }; // 定义的上传的配置对象
// 获取阿里token等相关信息的方法
function getToken(){
   }

getToken().then(function(res){
   
	if(res.success){
   
		// (这个看后端返回的字段名叫什么,此处是随便一写~)
		accessid = res.accessid; 
		accesskey = res.accesskey;
		token = res.token;
		
		var policyText = {
   
			 //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
	         'expiration': res.expiration,         
	         'conditions': [
	             ['content-length-range', 0, 1048576000] // 设置上传文件的大小限制
	         ]
	     };
	     policy
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值