小程序前端直傳阿里云oss
發(fā)布時間：2021-06-21 09:32 所屬欄目：小程序開發(fā)教程
一、上傳會用到的一些東西：
1.wx.chooseImage；
2.wx.uploadFile；
3.獲取上傳需要的簽名（signature）和加密策略（policy）和上傳url(host)的接口；
二、步驟拆解：
1.通過接口獲取簽名等信息；
2.選擇圖片得到filePath；
3.上傳圖片得到oss圖片路徑并渲染；
三、代碼實現(xiàn)：
ossPolicy:{
OSSAccessKeyId: "LTAIEGwazoZUp6GV",
accessid: "LTAIEGwazoZUp6GV",
dir: "",
expire: 1559634215,
host: "http://dhb-business-card.oss-cn-aabbccdd.aliyuncs.com",
policy: "eyJleHBpcmF0aW9uIjoiMjAxOS0wNi0wNFQxNTo0MzozNVoiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwyMDk3MTUyMDBdLFsic3RhcnRzLXdpdGgiLCIka2V5Ii23Il1dfQ==",
signature: "2n+ATkFZm23BWrXcfi7hHH9/c+Y="
}
|
2.選擇圖片：
//選擇圖片
publishGallery() {
var imageArray = [];// 多圖臨時路徑數(shù)組
wx.chooseImage({
count: 9, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認(rèn)二者都有
success: function (res) {
let filePath = res.tempFilePaths;
this.uploadImg(filePath)
}
})
},
|
3.上傳圖片
// 上傳圖片
uploadImg(filePath){
let _this = this;
_this.setData({
uploadPercent: true
})
let {
host,
OSSAccessKeyId,
policy,
signature
} = this.ossPolicy;
let imgList = [];
filePath.map((item) => {
wx.uploadFile({
url: host,
filePath: item,
name: 'file',
formData: {
name: item,
key: 'bbs/${filename}',
success_action_status: '200',
OSSAccessKeyId,
policy,
signature
},
success: res => {
if (res.statusCode === 200) {
_this.setData({
uploadPercent: false
});
const fileName = item.split('http://tmp/')[1];
imgList.push(`${host}/bbs/${fileName}`);
_this.setData({
img_l: imgList
});
}
},
fail: res => {
console.log(res)
}
})
});
},
|
注意事項：
1.上傳中拼裝的formData中的key為與后端約定的文件名，一般需要進行時間戳加密或者md5加密；
2.后面渲染圖片時，imgList的拼裝名一定要合key值對應(yīng)，不然會出現(xiàn)問題；
3.如若需要對圖片大小之類的進行一些限制，在chooseImage的success回調(diào)里對res.tempFiles進行相關(guān)處理；
