七牛 js JDK使用 - 上傳APP

elva 發(fā)布于2019-08-20 12:10 / 884人閱讀

摘要：背景介紹使用將包括安卓和上傳到七牛上傳所以不考慮數(shù)據(jù)處理使用后臺(tái)得到七牛上傳基于下面不詳述如何使用參見(jiàn)七牛上傳的簡(jiǎn)單案例也不詳述，參見(jiàn)官網(wǎng)事例很清楚了。指定上傳的目標(biāo)資源空間和資源鍵的長(zhǎng)度最大為字節(jié)。，表示只允許用戶上傳指定的文件。

背景介紹

使用JS將APP（包括安卓和IOS）上傳到七牛（上傳APP所以不考慮數(shù)據(jù)處理）

uptoken使用JAVA后臺(tái)得到

七牛上傳基于plupload下面不詳述如何使用參見(jiàn)

七牛上傳的簡(jiǎn)單案例也不詳述，參見(jiàn)官網(wǎng)事例很清楚了。就是參數(shù)一定看仔細(xì)！

清除緩存問(wèn)題

IOS APP上傳icon和ipa自動(dòng)生成plist

補(bǔ)充：限制選擇文件類(lèi)型；打開(kāi)多個(gè)選擇文件窗口

踩過(guò)的坑 uptoken獲得失敗

1.使用前端獲?。?br>本人是個(gè)前端，在后臺(tái)還沒(méi)給出獲取uptoken接口時(shí)，我先選擇了使用JS（uptoken_func參數(shù)）獲取進(jìn)行測(cè)試，代碼如下：詳細(xì)參見(jiàn)

    // uptoken_func: function (file) {    // 在需要獲取uptoken時(shí)，該方法會(huì)被調(diào)用
    /**
     * 上傳憑證算法實(shí)現(xiàn)參考
     * 請(qǐng)注意External Resources項(xiàng)中引用的第三方CryptoJS庫(kù)
     */
    var genUpToken = function(accessKey, secretKey, putPolicy) {
        //SETP 2
        var put_policy = JSON.stringify(putPolicy);
        //SETP 3
        var encoded = base64encode(utf16to8(put_policy));
        //SETP 4
        var hash = CryptoJS.HmacSHA1(encoded, secretKey);
        var encoded_signed = hash.toString(CryptoJS.enc.Base64);
        //SETP 5
        var upload_token = accessKey + ":" + safe64(encoded_signed) + ":" + encoded;
        console && console.log("upload_token=", upload_token)
        return upload_token;
  // }

費(fèi)了半天勁，又是引入CryptoJS，又是加入utf16to8等等方法，最后還是失敗了，生成了一個(gè)uptoken我用來(lái)上傳文件上傳失敗，就問(wèn)七牛工單，他說(shuō)uptoken過(guò)時(shí)或者錯(cuò)誤，這就沒(méi)法搞了也不知道為什么錯(cuò)，就在沒(méi)有頭緒的時(shí)候后臺(tái)接口好了，得，用后臺(tái)接口，結(jié)束?。ㄓ型肑S獲取了uptoken的可以來(lái)交流）
不過(guò)在錯(cuò)誤中學(xué)習(xí)到了uptoken的第三個(gè)值（用“：”分割的aaaa：aaaa：aaaa）可以通過(guò)base64解碼得到上傳策略。

2.使用后臺(tái)獲取（我選擇的是java）
導(dǎo)入gson-1.6.jar和qiniu-java-sdk-7.0.0.jar，以下是qiniu的方法!是用uptoken，傳入需要的參數(shù)既可以獲得，本人不做后臺(tái)開(kāi)發(fā)就不詳述，就是一定注意參數(shù)不要傳錯(cuò)了，我們搞了好久AK，SK復(fù)制錯(cuò)了，如果提示uptoken錯(cuò)誤多檢查幾遍參數(shù)。到此完成了一個(gè)最簡(jiǎn)單的上傳。圖片描述

4M以上大文件上傳失敗

奇葩一樣的大坑啊，本來(lái)就是剛剛上手qiniu還沒(méi)搞懂的時(shí)候還在郁悶昨天還好好的怎么過(guò)了一晚就上傳失敗了，查詢(xún)資料，全不費(fèi)功夫社區(qū)有人踩過(guò)了。看第二個(gè)評(píng)論，簡(jiǎn)單說(shuō)就是設(shè)置uptoken參數(shù)不能上傳大文件，必須設(shè)置uptoken_url才行，作者說(shuō)的第一個(gè)方法我進(jìn)不去，就沒(méi)有糾結(jié)。這個(gè)是qiniu的bug！

你直接看源碼就知道它在判斷需要分塊的時(shí)候，js-sdk內(nèi)部設(shè)置up.setOption的調(diào)用getUptoken()，that.tokenInfo在只填寫(xiě)token的時(shí)候，還是undefined，所以就出問(wèn)題了。
因?yàn)閠okenInfo是在走getNewUpToken()設(shè)置的，而getNewUpToken是走填了url才會(huì)執(zhí)行的函數(shù)。

覆蓋已有文件

剛剛拿到需求，思索一番，

方案一：生成一個(gè)可用覆蓋文件的uptoken；

方案二：qiniuJSjdk通過(guò)配置參數(shù)可以覆蓋文件。

查閱API，社區(qū)資料，發(fā)現(xiàn)方案一可以行的通，只需后臺(tái)uptoken方法時(shí)傳入key參數(shù)即可覆蓋服務(wù)器上面的key文件。
我原以為key也是后臺(tái)給設(shè)定的存儲(chǔ)文件名，（這個(gè)key并不是服務(wù)器存儲(chǔ)的最終文件名）后來(lái)才發(fā)現(xiàn)不是，詳細(xì)看scope參數(shù)。

指定上傳的目標(biāo)資源空間 Bucket 和資源鍵 Key（key的長(zhǎng)度最大為750字節(jié)）。有兩種格式：
●，表示允許用戶上傳文件到指定的 bucket。在這種格式下文件只能新增，若已存在同名資源上傳則會(huì)失敗。
●:，表示只允許用戶上傳指定 key的文件。在這種格式下文件默認(rèn)允許修改，若已存在同名資源則會(huì)被覆蓋。如果只希望上傳指定 key 的文件，并且不允許修改，那么可以將下面的insertOnly 屬性值設(shè)為 1。

由于后臺(tái)需要key，所以前臺(tái)在uptoken_url時(shí)傳參，例如："/appstore/app/qiniuUploadToken?params=a.png"。

關(guān)于文件名

前臺(tái)有三個(gè)參數(shù)和文件名有關(guān)：

// unique_names: true,              // 默認(rèn)false，key為文件名。若開(kāi)啟該選項(xiàng)，JS-SDK會(huì)為每個(gè)文件自動(dòng)生成key（文件名）
// save_key: true,                  // 默認(rèn)false。若在服務(wù)端生成uptoken的上傳策略中指定了sava_key，則開(kāi)啟，SDK在前端將不對(duì)key進(jìn)行任何處理
"Key": function (up, file) {
    // 若想在前端對(duì)每個(gè)文件的key進(jìn)行個(gè)性化處理，可以配置該函數(shù)
    // 該配置必須要在unique_names: false，save_key: false時(shí)才生效
    var key = file.name;//**錯(cuò)誤**
   // do something with key here
   return key
   }

重點(diǎn)看第三個(gè)參數(shù)，當(dāng)時(shí)沒(méi)有在意就這樣寫(xiě)的，所以認(rèn)為給后臺(tái)傳的key就是服務(wù)器存儲(chǔ)的文件名，其實(shí)不然，是我在JS key中設(shè)置了var key = file.name。應(yīng)該需要前端定一個(gè)名字，而不是文件原名。

清除緩存問(wèn)題

看官方文檔給出如下解決方法，生成管理token，清除緩存。
但是客服給出了更好的解決方案

一、URL 問(wèn)號(hào)傳參刷新： 
二、在七牛云存儲(chǔ)上刷新： 1、登錄portal.qiniu.com  2、工具刷新 3、API 接口文檔刷新：
三、只使用fusion cdn加速,且沒(méi)有使用七牛存儲(chǔ)

我選擇了最簡(jiǎn)單的第一種，URL 問(wèn)號(hào)傳參。（拋出問(wèn)題：ios app是ipa url問(wèn)號(hào)傳參，還是plisturl問(wèn)號(hào)傳參，還是都需要，待測(cè)試驗(yàn)證，之后更新?。?/p>

例如，如果 http://7xt44n.com2.z0.glb.qin...
這個(gè)圖片資源沒(méi)有更新， 可以在該 URL 后面加上參數(shù)的形式來(lái)讓 CDN
強(qiáng)制刷新：http://7xt44n.com2.z0.glb.qin...，CDN
拿到這個(gè) URL 后會(huì)強(qiáng)制回七牛的存儲(chǔ)中取回最新的資源。
原理： （用戶創(chuàng)建空間為普通平臺(tái)，在這個(gè)平臺(tái)下 url 是完整緩存的。也就是說(shuō)。如果你帶了? 1234 這樣的查詢(xún)參數(shù)在文件 url
后面，就變成了不同的 url，所以不會(huì)命中 cdn 的緩存。會(huì)去原站七牛拉資源，這時(shí)候拉取到的資源就變成了覆蓋更新后的資源了。）

IOS APP上傳icon和ipa自動(dòng)生成plist

原先的ios部署非常不方便，需要上傳icon和ipa得到地址后修改plist，再上傳plist。所以就想能不能做到自動(dòng)。
還是喜歡先查閱資料看看網(wǎng)上有沒(méi)有方案，一無(wú)所獲。
方案如下：（以下代碼感謝導(dǎo)師的支持）

使用Arttemplate得到一個(gè)模板

使用blob得到一個(gè)blob數(shù)據(jù)用于生成file對(duì)象

使用七牛的表單上傳，結(jié)合XMLHttpRequest，formData得到一個(gè)表單數(shù)據(jù)
詳細(xì)代碼：

function plist(icon57Url, icon512Url, ipaUrl, key,plistUrl) {
    var data = {
        icon57Url: icon57Url,
        icon512Url: icon512Url,
        ipaUrl: ipaUrl,
    };
    var html = template("test", data);
    var blob = new Blob([html], {type: "text/plain"});
    //document.getElementById("content").innerHTML = html;
    var Qiniu_UploadUrl = "http://up.qiniu.com";
    var Qiniu_upload = function (f, token) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", Qiniu_UploadUrl, true);
        var formData, startDate;
        formData = new FormData();
        //if (key !== null && key !== undefined) formData.append("key", key);
        formData.append("token", token);
        formData.append("name", key + ".plist");
        formData.append("chunk", 0);
        formData.append("chunks", 1);
        formData.append("key", key + ".plist");
        formData.append("file", f, key + ".plist");
        var taking;
        xhr.upload.addEventListener("loadstart", function (up, file) {
            /*up.settings.multipart_params = {
             filename : "xucheng.docx"
             };*/
        }, false);
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                /*var nowDate = new Date().getTime();
                 taking = nowDate - startDate;
                 var x = (evt.loaded) / 1024;
                 var y = taking / 1000;
                 var uploadSpeed = (x / y);
                 var formatSpeed;
                 if (uploadSpeed > 1024) {
                 formatSpeed = (uploadSpeed / 1024).toFixed(2) + "Mb/s";
                 } else {
                 formatSpeed = uploadSpeed.toFixed(2) + "Kb/s";
                 }*/
                //var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                //progressbar.progressbar("value", percentComplete);
                // console && console.log(percentComplete, ",", formatSpeed);
            }
        }, false);

        xhr.onreadystatechange = function (response) {
            if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
                var blkRet = JSON.parse(xhr.responseText);
                Compost("/appstore/app/updateOneProperty",{"id":datascope.appid,"ios_url":plistUrl},function () {
                    $("#ios_url").textbox("setText", plistUrl);
                })
                console.log("plist上傳成功")
            } else if (xhr.status != 200 && xhr.responseText) {

            }
        };
        startDate = new Date().getTime();
        $("#progressbar").show();
        xhr.send(formData);
    };
    /*var reader = new window.FileReader();
     reader.readAsDataURL(blob);
     reader.onloadend = function() {
     var base64data = reader.result;
     console.log(base64data);
     }*/
    $.ajax({
        type: "get",
        url: "/appstore/app/qiniuUploadToken?params=" + key + ".plist",
        async: true,
        dataType: "json",
        success: function (data) {
            var token = data.uptoken;
            console.log(token);
            Qiniu_upload(blob, token);
        }
    });
}

到此最重要的一步自動(dòng)上傳plist完成！，以此共同學(xué)習(xí)。

補(bǔ)充 限制選擇文件類(lèi)型

plupload插件支持，ipa和apk都是zip類(lèi)型，所以title是Zip files

filters: {
                mime_types: [
                   {title: "Image files", extensions: "png"}, //限定png后綴上傳
                   {title: "Zip files", extensions: "ipa"}, //限定ipa后綴上傳
                   {title: "Zip files", extensions: "apk"}, //限定apk后綴上傳
                ]
            },

打開(kāi)多個(gè)選擇文件窗口

每次實(shí)例化option方法時(shí)會(huì)（ browse_button: *// 上傳選擇的點(diǎn)選按鈕，必需）給按鈕綁定一個(gè)點(diǎn)擊事件，所以之后會(huì)點(diǎn)擊打開(kāi)多次選擇文件窗口。
嘗試解決方案（失?。轰N(xiāo)毀option對(duì)象，銷(xiāo)毀對(duì)象綁定的事件不會(huì)刪除
銷(xiāo)毀綁定事件，由于沒(méi)有事件名稱(chēng)所以無(wú)法刪除
嘗試解決方案（成功）：

 if (uploader) {uploader.disableBrowse(true);}

GPU云服務(wù)器云服務(wù)器關(guān)于jdk的使用 linux云服務(wù)器上傳jdk 七牛上傳策略七牛上傳圖片

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80830.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

elva

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

2021年10月國(guó)產(chǎn)數(shù)據(jù)庫(kù)大事記

閱讀 2758·2021-11-17 09:33
c++代碼優(yōu)化~effective c++總結(jié) 10.12

閱讀 945·2021-10-13 09:40
inline 或 inline-block 元素間的間隙

閱讀 678·2019-08-30 15:54
CSS的inline、block與inline-block

閱讀 865·2019-08-29 15:38
CSS進(jìn)階篇--設(shè)置滾動(dòng)條樣式

閱讀 2507·2019-08-28 18:15
vue-router學(xué)習(xí)

閱讀 2559·2019-08-26 13:38
ES6 知識(shí)整理一（es6快速入門(mén)）

閱讀 1920·2019-08-26 13:36
一個(gè)菜鳥(niǎo)(老yin逼)教后端的你如何"一天"做好微信小程序

閱讀 2223·2019-08-26 11:36

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

七牛 js JDK使用 - 上傳APP

相關(guān)文章

Laravel中前端js上傳圖片到七牛云

Laravel中前端js上傳圖片到七牛云

用純Javascript實(shí)現(xiàn)React Native的文件上傳

Webpack 項(xiàng)目?jī)?yōu)化雜記

koa2實(shí)現(xiàn)上傳圖片，并且同步上傳到七牛云存儲(chǔ)

發(fā)表評(píng)論

0條評(píng)論

elva

男|高級(jí)講師

TA的文章

2021年10月國(guó)產(chǎn)數(shù)據(jù)庫(kù)大事記

c++代碼優(yōu)化~effective c++總結(jié) 10.12

inline 或 inline-block 元素間的間隙

CSS的inline、block與inline-block

CSS進(jìn)階篇--設(shè)置滾動(dòng)條樣式

vue-router學(xué)習(xí)

ES6 知識(shí)整理一（es6快速入門(mén)）

一個(gè)菜鳥(niǎo)(老yin逼)教后端的你如何"一天"做好微信小程序

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

七牛 js JDK使用 - 上傳APP

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！