小程序上傳文件到OSS也是利用OSS提供的PostObject接口來實現表單文件上傳到OSS

步驟1：配置Bucket跨域訪問

客戶端進行表單直傳到OSS時，會從瀏覽器向OSS發送帶有Origin的請求消息。OSS對帶有Origin頭的請求消息會進行跨域規則（CORS）的驗證。因此需要為Bucket設置跨域規則以支持Post方法。

登錄OSS管理控制臺。

單擊Bucket列表，之后單擊目標Bucket名稱。

單擊權限管理 > 跨域設置，在跨域設置區域單擊設置。

單擊創建規則，配置如下圖所示

步驟2：配置外網域名到小程序的域名白名單

登錄OSS管理控制臺。

單擊Bucket列表，之后單擊目標Bucket名稱。

存儲空間概覽頁的訪問域名區域查看Bucket域名。

登錄微信小程序平臺，配置小程序的上傳域名白名單。

步驟3：小程序端代碼

config.js //阿里云oss Bucket的配置信息

var fileHost="xxxx.aliyuncs.com(你的阿里云oss地址)" var config = {//aliyun OSS configuploadImageUrl: `${fileHost}`, //默認存在根目錄，可根據需求改AccessKeySecret: '填你自己的AccessKeySecret',OSSAccessKeyId: '填你自己的 OSSAccessKeyId',timeout: 87600 //這個是上傳文件時Policy的失效時間 }; module.exports = config

Base64,hmac,sha1,crypto 相關算法點擊 這里

參數說明

參數類型必填說明

filePath	String	是	微信本地的文件名
dir	String	是	保存到阿里云oss的目錄，可填""(空字符串)
success	Function	否	上傳成功的回調函數，返回值為保存的網絡路徑
fail	Function	否	上傳失敗的回調函數，返回值與官方uploadfile api文檔一致

代碼實現

UploadAliyun.js

const env = require('../config.js'); //配置文件，在這里配置你的OSS keyId和KeySecret,timeout:87600; //更好的做法是把這些信息放到服務器進行簽名，防止信息泄露const Base64 = require('./Base64.js');require('./hmac.js'); require('./sha1.js'); const Crypto = require('./crypto.js');const uploadFile = function (filePath, dir, successc, failc) {if (!filePath || filePath.length < 9) {wx.showModal({title: '圖片錯誤',content: '請重試',showCancel: false,})return;}console.log('上傳圖片…');const aliyunFileKey = dir+filePath.replace('wxfile://', '');//我直接拿微信本地的名字當做傳到服務器上的名字了，dir傳的是images/，表示要傳到這個目錄下// const aliyunFileKey = fileW + '' + (new Date().getTime()) + '_' + objectId + '.mp4';//const aliyunFileKey = fileW const aliyunServerURL = env.uploadImageUrl;//OSS地址，需要httpsconst accessid = env.OSSAccessKeyId;//const policyBase64 = env.Policy;//const signature = env.Signature;const policyBase64 = getPolicyBase64();const signature = getSignature(policyBase64);//獲取簽名console.log('aliyunFileKey=', aliyunFileKey);console.log('aliyunServerURL',aliyunServerURL);wx.uploadFile({url: aliyunServerURL,filePath: filePath,name: 'file',//必須填fileformData: {'key': aliyunFileKey,'policy': policyBase64, 'OSSAccessKeyId': accessid,'signature': signature, 'success_action_status': '200',},success: function (res) {if (res.statusCode != 200) {failc(new Error('上傳錯誤:' + JSON.stringify(res)))return;}console.log('上傳圖片成功', res)successc(aliyunFileKey);},fail: function (err) {err.wxaddinfo = aliyunServerURL;failc(err);},}) }const getPolicyBase64 = function () {let date = new Date();date.setHours(date.getHours() + env.timeout);let srcT = date.toISOString();const policyText = {"expiration": srcT, //設置該Policy的失效時間，超過這個失效時間之后，就沒有辦法通過這個policy上傳文件了 "conditions": [["content-length-range", 0, 5*1024 * 1024] // 設置上傳文件的大小限制,5mb]};const policyBase64 = Base64.encode(JSON.stringify(policyText));return policyBase64; }const getSignature = function (policyBase64) {const accesskey = env.AccessKeySecret;const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {asBytes: true});const signature = Crypto.util.bytesToBase64(bytes);return signature; }module.exports = uploadFile;

代碼使用

const uploadImage = require('../../utils/uploadAliyun.js');//filePath為要上傳的本地文件的路徑 //images/為oss目錄 uploadImage(filePath, "images/",function (res) {console.log("上傳成功")//todo 做任何你想做的事}, function (res) {console.log("上傳失敗")//todo 做任何你想做的事}

基本上就是這樣，有不明白的就留言吧~

---

總結

以上是生活随笔為你收集整理的【微信小程序】上传文件到阿里云OSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。