小程序直傳文件到oss

與JavaScript客戶端直傳的原理相同，小程序上傳文件到 OSS 也是利用 OSS 提供的 PostObject 接口來實現表單文件上傳到 OSS:https://help.aliyun.com/document_detail/31988.html?spm=a2c4g.11186623.2.13.6dfd58abh4C6Ld 

測試環境：微信小程序環境下將文件上傳到 OSS

 

1、配置bucket跨域

 

  進入oss管理控制台--->選擇要上傳的bucket--->基礎設置--->跨域設置---->添加規則

 

 

2、配置該bucket的外網域名到小程序的上傳域名中白名單中

 

 

3、上傳請求

 

計算Signature的具體流程為：

1. 創建一個 UTF-8 編碼的 policy。
2. 將 policy 進行 base64 編碼，其值即為 policy 表單域填入的值，將該值作為將要簽名的字符串。
3. 使用 AccessKeySecret 對要簽名的字符串進行簽名，簽名方法與Header中簽名的計算方法相同（將要簽名的字符串替換為 policy 即可）

安裝：crypto-js

cnpm install crypto-js

 

安裝：js-base64

cnpm install --save js-base64

cnpm install --save babel-preset-env


const CryptoJS = require('crypto-js');
import { Base64 } from 'js-base64';
const accessid= 'xxxxxxxxxxx';
const accesskey= 'xxxxxxxtjSonMETLI0KLy';
const SecurityToken="xxxxxxxxxx"

const host = 'https://xxxx-cad-oss.oss-cn-shenzhen.aliyuncs.com'; //bucket的外網域名
const policyText = {
 "expiration": "2030-01-01T12:00:00.000Z", //設置該Policy的失效時間，超過這個失效時間之后，就沒有辦法通過這個policy上傳文件了
 "conditions": [
 ["content-length-range", 0, 1048576000] // 設置上傳文件的大小限制
 ]
};

function getOssSecret (accesskey) {
 const policyBase64=  Base64.encode(JSON.stringify(policyText))
 const message = policyBase64
 const bytes = CryptoJS.HmacSHA1(message, accesskey, { asBytes: true }) ;
 const signature =  CryptoJS.enc.Base64.stringify(bytes);
 return {"policyBase64":policyBase64,"signature":signature}
}

function upload (){
 const{policyBase64, signature}=getOssSecret(accesskey)
 wx.uploadFile({
 url: host,//bucket的外網域名 url
 filePath: src,//要上傳文件資源的路徑
 name: 'file',//必須填file
 formData: {
 'name':"file",
 'key':"images/test.jpg", //object_key
 'policy': policyBase64,
 'OSSAccessKeyId':accessid,
 'success_action_status': '200',
 'signature':signature,
 'x-oss-security-token':SecurityToken //該字段必填，阿里雲的示例上沒有寫

 },
 success: function(res) {
 console.log("success",res)
 if (res.statusCode != 200) {
 }
 },
 fail:function (errMsg) {
 console.log("fail",errMsg)

 }

 })
}