微信小程序環(huán)境下將文件上傳到OSS的方法步驟
更新時(shí)間：2019年05月31日 08:26:57 作者：達(dá)叔小生
這篇文章主要介紹了微信小程序環(huán)境下將文件上傳到OSS的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
步驟 1： 配置 Bucket 跨域
客戶端進(jìn)行表單直傳到 OSS 時(shí)，會從瀏覽器向 OSS 發(fā)送帶有 Origin 的請求消息。OSS 對帶有 Origin 頭的請求消息會進(jìn)行跨域規(guī)則（CORS）的驗(yàn)證。因此需要為 Bucket 設(shè)置跨域規(guī)則以支持 Post 方法。
步驟 2：配置外網(wǎng)域名到小程序的上傳域名白名單中
通過 OSS 控制臺查看外網(wǎng)域名。
登錄微信小程序平臺，配置小程序的上傳域名白名單。
步驟 3：使用 Web 端直傳實(shí)踐方案 Demo 進(jìn)行上傳測試
下載應(yīng)用服務(wù)器代碼
修改 Demo 中 upload.js 的密鑰和地址。
進(jìn)行上傳測試。
獲取上傳需要的簽名（signature）和加密策略（policy）
使用微信小程序上傳圖片
使用 chooseImage API 進(jìn)行圖片選擇，然后調(diào)用 uploadFile 進(jìn)行文件上傳
upload.js
accessid= '';
accesskey= '';
host = '';
g_dirname = ''
g_object_name = ''
g_object_name_type = ''
now = timestamp = Date.parse(new Date()) / 1000;
var policyText = {
"expiration": "2020-01-01T12:00:00.000Z", //設(shè)置該P(yáng)olicy的失效時(shí)間，超過這個(gè)失效時(shí)間之后，就沒有辦法通過這個(gè)policy上傳文件了
"conditions": [
["content-length-range", 0, 1048576000] // 設(shè)置上傳文件的大小限制
]
};
var policyBase64 = Base64.encode(JSON.stringify(policyText))
message = policyBase64
var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true }) ;
var signature = Crypto.util.bytesToBase64(bytes);
function check_object_radio() {
var tt = document.getElementsByName('myradio');
for (var i = 0; i < tt.length ; i++ )
{
if(tt[i].checked)
{
g_object_name_type = tt[i].value;
break;
}
}
}
function get_dirname()
{
dir = document.getElementById("dirname").value;
if (dir != '' && dir.indexOf('/') != dir.length - 1)
{
dir = dir + '/'
}
//alert(dir)
g_dirname = dir
}
function random_string(len) {
len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
function get_suffix(filename) {
pos = filename.lastIndexOf('.')
suffix = ''
if (pos != -1) {
suffix = filename.substring(pos)
}
return suffix;
}
function calculate_object_name(filename)
{
if (g_object_name_type == 'local_name')
{
g_object_name += "${filename}"
}
else if (g_object_name_type == 'random_name')
{
suffix = get_suffix(filename)
g_object_name = g_dirname + random_string(10) + suffix
}
return ''
}
function get_uploaded_object_name(filename)
{
if (g_object_name_type == 'local_name')
{
tmp_name = g_object_name
tmp_name = tmp_name.replace("${filename}", filename);
return tmp_name
}
else if(g_object_name_type == 'random_name')
{
return g_object_name
}
}
function set_upload_param(up, filename, ret)
{
g_object_name = g_dirname;
if (filename != '') {
suffix = get_suffix(filename)
calculate_object_name(filename)
}
new_multipart_params = {
'key' : g_object_name,
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'success_action_status' : '200', //讓服務(wù)端返回200,不然，默認(rèn)會返回204
'signature': signature,
};
up.setOption({
'url': host,
'multipart_params': new_multipart_params
});
up.start();
}
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'selectfiles',
//multi_selection: false,
container: document.getElementById('container'),
flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
url : 'http://oss.aliyuncs.com',
init: {
PostInit: function() {
document.getElementById('ossfile').innerHTML = '';
document.getElementById('postfiles').onclick = function() {
set_upload_param(uploader, '', false);
return false;
};
},
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
+'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
+'</div>';
});
},
BeforeUpload: function(up, file) {
check_object_radio();
get_dirname();
set_upload_param(up, file.name, true);
},
UploadProgress: function(up, file) {
var d = document.getElementById(file.id);
d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
var prog = d.getElementsByTagName('div')[0];
var progBar = prog.getElementsByTagName('div')[0]
progBar.style.width= 2*file.percent+'px';
progBar.setAttribute('aria-valuenow', file.percent);
},
FileUploaded: function(up, file, info) {
if (info.status == 200)
{
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = 'upload to oss success, object name:' + get_uploaded_object_name(file.name);
}
else
{
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
}
},
Error: function(up, err) {
document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
}
}
});
uploader.init();
index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>OSS web直傳</title> <link rel="stylesheet" type="text/css" href="style.css"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body> <h2>OSS web直傳---直接在JS簽名</h2> <ol> <li>基于plupload封裝 </li> <li>支持html5,flash,silverlight,html4 等協(xié)議上傳</li> <li>可以運(yùn)行在PC瀏覽器，手機(jī)瀏覽器，微信</li> <li>可以選擇多文件上傳</li> <li>顯示上傳進(jìn)度條</li> <li>可以控制上傳文件的大小</li> <li>最關(guān)鍵的是，讓你10分鐘之內(nèi)就能移植到你的系統(tǒng)，實(shí)現(xiàn)以上牛逼的功能！</li> <li>注意一點(diǎn)，bucket必須設(shè)置了Cors(Post打勾）,不然沒有辦法上傳</li> <li>注意一點(diǎn)，把upload.js 里面的host/accessid/accesskey改成您上傳所需要的信息即可</li> <li>此方法是直接在前端簽名，有accessid/accesskey泄漏的風(fēng)險(xiǎn), 線上生產(chǎn)請使用后端簽名例子<a >點(diǎn)擊查看詳細(xì)文檔</a></li> </ol> <br> <form name=theform> <input type="radio" name="myradio" value="local_name" checked=true/> 上傳文件名字保持本地文件名字 <input type="radio" name="myradio" value="random_name" /> 上傳文件名字是隨機(jī)文件名 <br/> 上傳到指定目錄:<input type="text" id='dirname' placeholder="如果不填，默認(rèn)是上傳到根目錄" size=50> </form> <h4>您所選擇的文件列表：</h4> <div id="ossfile">你的瀏覽器不支持flash,Silverlight或者HTML5！</div> <br/> <div id="container"> <a id="selectfiles" href="javascript:void(0);" class='btn'>選擇文件</a> <a id="postfiles" href="javascript:void(0);" class='btn'>開始上傳</a> </div> <pre id="console"></pre> <p> </p> </body> <script type="text/javascript" src="lib/crypto1/crypto/crypto.js"></script> <script type="text/javascript" src="lib/crypto1/hmac/hmac.js"></script> <script type="text/javascript" src="lib/crypto1/sha1/sha1.js"></script> <script type="text/javascript" src="lib/base64.js"></script> <script type="text/javascript" src="lib/plupload-2.1.2/js/plupload.full.min.js"></script> <script type="text/javascript" src="upload.js"></script> </html>
實(shí)現(xiàn)點(diǎn)擊按鈕選擇圖片后顯示圖片并且可以預(yù)覽該圖片
跳轉(zhuǎn)的按鈕在子組件
this.$navigate({url:"content"})
this.$parent.$navigate({url:"content"})
wepy.navigateTo({
url: '/pages/content'
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文將用一個(gè)簡單的例子詳細(xì)講解如何用原生JS一步步實(shí)現(xiàn)完整的任意位置縮放圖片功能,無任何第三方依賴,指針事件 進(jìn)行多端統(tǒng)一的事件監(jiān)聽,干貨滿滿,需要的朋友可以參考下2024-04-04
本文主要介紹了javascript表單的Ajax提交插件的使用，具有一定的參考價(jià)值。下面跟著小編一起來看下吧2016-12-12
js網(wǎng)頁版計(jì)算器的簡單實(shí)現(xiàn)
這篇文章介紹了網(wǎng)頁版計(jì)算器的簡單實(shí)現(xiàn)代碼，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了基于js實(shí)現(xiàn)投票的實(shí)例代碼,三種投票表現(xiàn)效果，個(gè)人比較喜歡柱狀投票圖，具有立體感，感興趣的朋友可以參考下2015-08-08
javascript 就地編輯實(shí)現(xiàn)代碼
最近正在看《javascript設(shè)計(jì)模式》，其中有一個(gè)'就地編輯'的示例，用來表現(xiàn)不同的繼承方式，看完之后想自己憑理解寫一個(gè)類似的東西。2010-05-05
這篇文章主要幫助大家理解javascript定時(shí)器中的單線程，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要為大家詳細(xì)介紹了原生js模擬購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要分享了原生js實(shí)現(xiàn)打字動畫游戲的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
JavaScript監(jiān)聽和禁用瀏覽器回車事件實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽和禁用瀏覽器回車事件實(shí)例,本文直接給出示例代碼,需要的朋友可以參考下2015-01-01
第一種就是利用ajax方式，第二種是，動態(tài)創(chuàng)建一個(gè)script標(biāo)簽，設(shè)置其src屬性，通過把script標(biāo)簽插入到頁面head來加載js，感興趣的朋友可以了解下2013-08-08