小程序前端直傳阿里云oss
發(fā)布時(shí)間：2021-06-21 09:32 所屬欄目：小程序開(kāi)發(fā)教程
一、上傳會(huì)用到的一些東西：
1.wx.chooseImage；
2.wx.uploadFile；
3.獲取上傳需要的簽名（signature）和加密策略（policy）和上傳url(host)的接口；
二、步驟拆解：
1.通過(guò)接口獲取簽名等信息；
2.選擇圖片得到filePath；
3.上傳圖片得到oss圖片路徑并渲染；
三、代碼實(shí)現(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í)路徑數(shù)組
wx.chooseImage({
count: 9, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(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)
}
})
});
},
|
注意事項(xiàng)：
1.上傳中拼裝的formData中的key為與后端約定的文件名，一般需要進(jìn)行時(shí)間戳加密或者md5加密；
2.后面渲染圖片時(shí)，imgList的拼裝名一定要合key值對(duì)應(yīng)，不然會(huì)出現(xiàn)問(wèn)題；
3.如若需要對(duì)圖片大小之類(lèi)的進(jìn)行一些限制，在chooseImage的success回調(diào)里對(duì)res.tempFiles進(jìn)行相關(guān)處理；
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://www.kknew.com.cn/wxmini/doc/course/26640.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)： 點(diǎn)擊咨詢(xún)
