<1>前期準備
開通阿里云OSS服務(wù)香追,對象存儲中創(chuàng)建Bucket(公司已開通直接使用)
*示例已開通阿里云且創(chuàng)建Bucket
照片.png
<2>上傳方式
小程序直傳
:小程序前端直接調(diào)用上傳微信上傳接口進行圖片/文件上傳合瓢。
通過后臺服務(wù)上傳
:把上傳文件請求接口傳給后端,通過后端處理傳給阿里云OSS透典。
<3>小程序直傳方法
1晴楔、向服務(wù)端獲取請求相關(guān)參數(shù)(policy、accessid掷匠、signature等)
//小程序上傳最重要是計算signature和policy滥崩,這個建議通過服務(wù)端進行相關(guān)簽名計算后返回給小程序,重點在服務(wù)端如何處理讹语。
function getOssSignHttp(tempFilePaths) {
var that = this;
wx.request({
url: app.globalData.url + "XXXXX服務(wù)端接口名XXXX",
data: '',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (json) {
//獲取上傳oss所需參數(shù)
//上傳圖片請求
uploadFileOssHttp.call(that, json.data, tempFilePaths);
},
fail: function (err) {
console.log(err)
}
})
}
2钙皮、調(diào)用微信上傳文件API -> wx.uploadFile
function uploadFileOssHttp(data, tempFilePaths) {
var date = jointString();
let formData = {
'name': tempFilePaths, //文件路徑
'key': 'APP-xxx/' + date + '.png',//文件名稱
'policy': data.policy,//服務(wù)端返回
'OSSAccessKeyId': data.accessid,//服務(wù)端返回
'signature': data.signature,//服務(wù)端返回
'success_action_status': '200'
}
console.log(formData);
wx.uploadFile({
url: data.host,//圖片存儲地址
filePath: tempFilePaths,//圖片路徑
name: 'file',//上傳類型
formData: formData,//上傳參數(shù)
success: function (json) {
console.log('圖片上傳成功');
},
fail: function (err) {
console.log('圖片上傳失敗');
}
})
}
3、文件名稱傳給服務(wù)端
根據(jù)項目情況而定是否把文件名稱傳給服務(wù)端顽决,一般情況需要給服務(wù)端做一個記錄
到這里短条,小程序上傳阿里云OSS的流程全部完成,服務(wù)端處理簽名及返回參數(shù)才菠,上傳API中對應(yīng)的參數(shù)沒有寫錯茸时,上傳就是一件so easy的事情啦!