七牛 js JDK使用 - 上傳APP

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

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

背景介紹

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

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

七牛上傳基于plupload下面不詳述如何使用參見

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

清除緩存問題

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

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

踩過的坑 uptoken獲得失敗

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

    // uptoken_func: function (file) {    // 在需要獲取uptoken時(shí)，該方法會(huì)被調(diào)用
    /**
     * 上傳憑證算法實(shí)現(xiàn)參考
     * 請注意External Resources項(xiàng)中引用的第三方CryptoJS庫
     */
    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我用來上傳文件上傳失敗，就問七牛工單，他說uptoken過時(shí)或者錯(cuò)誤，這就沒法搞了也不知道為什么錯(cuò)，就在沒有頭緒的時(shí)候后臺(tái)接口好了，得，用后臺(tái)接口，結(jié)束?。ㄓ型肑S獲取了uptoken的可以來交流）
不過在錯(cuò)誤中學(xué)習(xí)到了uptoken的第三個(gè)值（用“：”分割的aaaa：aaaa：aaaa）可以通過base64解碼得到上傳策略。

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

4M以上大文件上傳失敗

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

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

覆蓋已有文件

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

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

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

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

指定上傳的目標(biāo)資源空間 Bucket 和資源鍵 Key（key的長度最大為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為文件名。若開啟該選項(xiàng)，JS-SDK會(huì)為每個(gè)文件自動(dòng)生成key（文件名）
// save_key: true,                  // 默認(rèn)false。若在服務(wù)端生成uptoken的上傳策略中指定了sava_key，則開啟，SDK在前端將不對key進(jìn)行任何處理
"Key": function (up, file) {
    // 若想在前端對每個(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í)沒有在意就這樣寫的，所以認(rèn)為給后臺(tái)傳的key就是服務(wù)器存儲(chǔ)的文件名，其實(shí)不然，是我在JS key中設(shè)置了var key = file.name。應(yīng)該需要前端定一個(gè)名字，而不是文件原名。

清除緩存問題

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

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

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

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

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

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

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

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

使用七牛的表單上傳，結(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ǔ)充 限制選擇文件類型

plupload插件支持，ipa和apk都是zip類型，所以title是Zip files

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/80830.html

發(fā)表評論

登陸后可評論

0條評論

elva

男|高級講師

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

TA的文章

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

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

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

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

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

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

閱讀 2543·2019-08-26 13:38
ES6 知識整理一（es6快速入門）

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

七牛 js JDK使用 - 上傳APP

相關(guān)文章

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

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

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

Webpack 項(xiàng)目優(yōu)化雜記

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

發(fā)表評論

0條評論

elva

男|高級講師

TA的文章

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

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 知識整理一（es6快速入門）

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

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

七牛 js JDK使用 - 上傳APP

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

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