一、上傳會用到的一些東西:
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)處理;
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)