先阿里云oss后臺管理配置,這里只是前端的操作,先獲取后端接口返回的數(shù)據(jù):
AccessKeyId, AccessKeySecret,SecurityToken,bucket,regionId,object_path,domain
bucket: OSS存儲空間名稱
domain: 域名地址
object_path: 保存至oss的文件路徑
微信小程序配置域名白名單
import crypto from 'crypto-js.js'
import { Base64 } from 'base64.min.js'
//1.計算簽名
function computeSignature(accessKeySecret, canonicalString) {
return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
}
//2.設(shè)置policy過期時間
const date = new Date();
date.setHours(date.getHours() + 1);
const policyText = {
expiration: date.toISOString(), // 設(shè)置policy過期時間。
conditions: [
// 限制上傳大小。
["content-length-range", 0, 1024 * 1024 * 1024],
],
};
const policy = Base64.encode(JSON.stringify(policyText)) // policy必須為base64的string
const signature = computeSignature(AccessKeySecret, policy) //簽名
const host = `https://${bucket}.${regionId}.aliyuncs.com` //存儲空間的訪問域名,例如https://xxxx.xxxx.aliyuncs.com
//3.選擇圖片并上傳
wx.chooseImage({
count: 1,
sizeType:['compressed'],
extension:['jpg','png'],
success:(file)=>{
//如果是多圖,循環(huán)執(zhí)行
//設(shè)置圖片名,保存地址
let fileName = md5((new Date()).getTime().toString())
let savePath = `${object_path}${fileName}.jpeg`
wx.uploadFile({
url: host,
filePath: file.tempFilePaths[0],
name:'file',
formData:{
'key': savePath, //設(shè)置文件上傳至OSS后的文件路徑。例如:test/myphoto.jpg
'policy': policy,
'OSSAccessKeyId': AccessKeyId,
'signature': signature,
'x-oss-security-token': SecurityToken //使用STS簽名時必傳
},
success:(res)=>{
//上傳成功
if(res.statusCode === 204){
//訪問上傳后的圖片:domain+savePath
}
}
})
}
})
[官方文檔地址](https://help.aliyun.com/document_detail/92883.html)