摘要:微信小程序圖片上傳阿里云服務(wù)器也折騰了蠻久才解決的,所以特意去記錄一下。上傳失敗第四步源碼在這里如果覺得這面文章對你有幫助的話,可給我點個這里,謝謝最后,希望這篇文章對你有所幫助,真真確確是可以在微信小程序中上傳圖片到阿里云的。
本人今年6月份畢業(yè),最近剛在上海一家小公司實習(xí),做微信小程序開發(fā)。最近工作遇到一個小問題。
微信小程序圖片上傳阿里云服務(wù)器Oss也折騰了蠻久才解決的,所以特意去記錄一下。
第一步:配置阿里云地址:我們公司是阿里云地址是會改變的,所以需要動態(tài)的從后臺獲取配置
var client = hprose.Client.create(app.globalym, ["get_oss_config"]); client.get_oss_config(******, *****).then(function (res) { var res = JSON.parse(res);//從后臺返回的oss賬號數(shù)據(jù) if (res.code == 1) {//判斷是否得到 env = { //aliyun OSS config uploadImageUrl: "https://" + res.body.bucket + "." + res.body.area + ".com", //默認(rèn)存在根目錄,可根據(jù)需求改 AccessKeySecret: res.body.accesskey, OSSAccessKeyId: res.body.accessid, timeout: 87600 //這個是上傳文件時Policy的失效時間 }; } }, function (err) { console.log("請求oss配置失敗"); console.log(err); });
主要是這部分。這是配置內(nèi)容
env = { //aliyun OSS config uploadImageUrl: "https://" + res.body.bucket + "." + res.body.area + ".com", //默認(rèn)存在根目錄,可根據(jù)需求改 AccessKeySecret: res.body.accesskey, OSSAccessKeyId: res.body.accessid, timeout: 87600 //這個是上傳文件時Policy的失效時間 };第二步:引用上傳圖片的模塊
const uploadImage = require("../../utils/uploadAliyun.js");
uploadAliyun.js的內(nèi)容
const Base64 = require("./Base64.js"); require("./hmac.js"); require("./sha1.js"); const Crypto = require("./crypto.js"); var env = null const uploadFile = function (params) { env = params.envs if (!params.filePath) { wx.showModal({ title: "圖片錯誤", content: "請重試", showCancel: false, }) return; } const aliyunFileKey = params.dir + params.filePath.replace("wxfile://", ""); //在手機(jī)上檢測 注意 //const aliyunFileKey = params.dir + params.filePath.replace("http://", ""); //在開發(fā)者工具里檢測 注意 const aliyunServerURL = env.uploadImageUrl; const accessid = env.OSSAccessKeyId; const policyBase64 = getPolicyBase64(); const signature = getSignature(policyBase64); // console.log("aliyunFileKey=", aliyunFileKey); // console.log("aliyunServerURL", aliyunServerURL); wx.uploadFile({ url: aliyunServerURL, filePath: params.filePath, name: "file", formData: { "key": aliyunFileKey, "policy": policyBase64, "OSSAccessKeyId": accessid, "signature": signature, "success_action_status": "200", }, success: function (res) { if (res.statusCode != 200) { if(params.fail){ params.fail(res) } return; } if(params.success){ params.success(aliyunFileKey); } }, fail: function (err) { err.wxaddinfo = aliyunServerURL; if (params.fail) { params.fail(err) } }, }) } const getPolicyBase64 = function () { let date = new Date(); date.setHours(date.getHours() + env.timeout); let srcT = date.toISOString(); const policyText = { "expiration": srcT, //設(shè)置該P(yáng)olicy的失效時間 "conditions": [ ["content-length-range", 0, 5 * 1024 * 1024] // 設(shè)置上傳文件的大小限制,5mb ] }; const policyBase64 = Base64.encode(JSON.stringify(policyText)); return policyBase64; } const getSignature = function (policyBase64) { const accesskey = env.AccessKeySecret; // console.log(accesskey) const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, { asBytes: true }); const signature = Crypto.util.bytesToBase64(bytes); return signature; } module.exports = uploadFile;
注意如果想在開發(fā)者工具里檢測上傳結(jié)果,請使用這段代碼
const aliyunFileKey = params.dir + params.filePath.replace("http://", ""); //在開發(fā)者工具里檢測 注意
在手機(jī)上要使用這段代碼,不然要報錯哦!
const aliyunFileKey = params.dir + params.filePath.replace("wxfile://", ""); //在手機(jī)上檢測 注意第三步:在需要上傳圖片的地方,加上這段代碼。
uploadImage({ filePath: res.tempFilePaths[0], dir: "images/", success: function (res) { console.log(res) }, fail: function (res) { console.log("上傳失敗") console.log(res) }, envs: env })第四步:
Base64,js,hmac.js,sha1.js,crypto.js,uploadAliyun.js源碼在這里,如果覺得這面文章對你有幫助的話,可給我點個star這里,謝謝!
最后,希望這篇文章對你有所幫助,真真確確是可以在微信小程序中上傳圖片到阿里云的。我也當(dāng)做筆記記錄一下。當(dāng)然感謝原文對我的幫助,不然我這個小菜鳥怎么解決這個問題呢,哈哈!
掃一掃 往期文章數(shù)據(jù)結(jié)構(gòu)與算法-LeetCode 格雷編碼(No.89)
數(shù)據(jù)結(jié)構(gòu)與算法-LeetCode 種花問題(No.605)
LeetCode-電話號碼的字母組合(No.17) 遞歸+hash
JavaScript 數(shù)據(jù)結(jié)構(gòu)與算法 這題你會嗎?
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52466.html
摘要:微信小程序圖片上傳阿里云服務(wù)器也折騰了蠻久才解決的,所以特意去記錄一下。上傳失敗第四步源碼在這里如果覺得這面文章對你有幫助的話,可給我點個這里,謝謝最后,希望這篇文章對你有所幫助,真真確確是可以在微信小程序中上傳圖片到阿里云的。 本人今年6月份畢業(yè),最近剛在上海一家小公司實習(xí),做微信小程序開發(fā)。最近工作遇到一個小問題。 微信小程序圖片上傳阿里云服務(wù)器Oss也折騰了蠻久才解決的,所以特意...
摘要:微信小程序圖片上傳阿里云服務(wù)器也折騰了蠻久才解決的,所以特意去記錄一下。上傳失敗第四步源碼在這里如果覺得這面文章對你有幫助的話,可給我點個這里,謝謝最后,希望這篇文章對你有所幫助,真真確確是可以在微信小程序中上傳圖片到阿里云的。 本人今年6月份畢業(yè),最近剛在上海一家小公司實習(xí),做微信小程序開發(fā)。最近工作遇到一個小問題。 微信小程序圖片上傳阿里云服務(wù)器Oss也折騰了蠻久才解決的,所以特意...
摘要:本文以開發(fā)一個類似語音口令紅包小程序為例,向您講解如何使用阿里云函數(shù)計算快速構(gòu)建微信小程序的服務(wù)端。 前言 這篇文章適合所有的想微信小程序開發(fā)新手、老鳥以及想準(zhǔn)備學(xué)習(xí)開發(fā)微信小程序的程序猿。本文以開發(fā)一個類似語音口令紅包小程序為例,向您講解如何使用阿里云函數(shù)計算快速構(gòu)建微信小程序的服務(wù)端。通過本文,您將會了解以下內(nèi)容: demo概覽 傳統(tǒng)服務(wù)器架構(gòu) VS Serverless架構(gòu) S...
摘要:本文以開發(fā)一個類似語音口令紅包小程序為例,向您講解如何使用阿里云函數(shù)計算快速構(gòu)建微信小程序的服務(wù)端。 前言 這篇文章適合所有的想微信小程序開發(fā)新手、老鳥以及想準(zhǔn)備學(xué)習(xí)開發(fā)微信小程序的程序猿。本文以開發(fā)一個類似語音口令紅包小程序為例,向您講解如何使用阿里云函數(shù)計算快速構(gòu)建微信小程序的服務(wù)端。通過本文,您將會了解以下內(nèi)容: demo概覽 傳統(tǒng)服務(wù)器架構(gòu) VS Serverless架構(gòu) S...
閱讀 3729·2021-09-22 15:49
閱讀 3300·2021-09-08 09:35
閱讀 1422·2019-08-30 15:55
閱讀 2321·2019-08-30 15:44
閱讀 714·2019-08-29 16:59
閱讀 1597·2019-08-29 16:16
閱讀 479·2019-08-28 18:06
閱讀 890·2019-08-27 10:55