uni-app 阿里云oss直傳采坑記錄

LeanCloud 發布于2019-08-23 16:29 / 1195人閱讀

摘要：阿里云官方直傳案例前提一般開發需求上傳文件用到的最多就是上傳視頻和圖片了上傳視頻接口和上傳圖片接口在成功的回調里面返回的參數里面，都表示文件的臨時路徑，只不過一個是字符串，一個是數組開發開發的時候，調試都是在中完成的，在選擇文件成功之后打

阿里云oss官方 javascript直傳案例
https://help.aliyun.com/docum...

前提

一般開發需求上傳文件用到的最多就是上傳視頻和圖片了
uni-app 上傳視頻接口uni.chooseVideo()和上傳圖片接口uni.chooseImage()
在成功的回調success里面返回的參數里面tempFilePath，tempFilePaths 都表示文件的臨時路徑，只不過一個是字符串，一個是數組

開發

開發的時候，調試都是在chrome中完成的，在選擇文件成功之后打印出的參數里面有文件的臨時路徑（瀏覽器中是blob地址）和文件大小
返回的參數沒有文件類型和文件名，然而我需要隨機生成文件名，這該咋辦？于是我搜到一個方法
用uni.request()讀取blob url地址，在成功返回的參數可以得到content-type，比如jpg圖片image/jpeg，之后用MIME來對比找到文件擴展名就行了
使用uni.uploadFile()上傳文件的時候formData參數里面key就傳需要保存的文件路徑+生成的隨機字符串+文件擴展名
ps:如果你要使用原文件名key的值就是 "${filename}",當然前面可以加文件路徑"path/"+"${filename}"。不過你上傳以后會發現oss返回的Response并沒有文件地址，而是什么都沒有！

天真的以為這樣上傳就沒問題了，后來打包安卓app在上傳文件的時候失敗了，排查原因發現是在生成隨機文件名時出現問題了

問題

原因就在上傳視頻接口uni.chooseVideo()和上傳圖片接口uni.chooseImage()返回的臨時地址在各個平臺表現并不一樣，官方文檔并沒有說明，我在官方論壇提問建議了
說下以下幾3個平臺：
1.在h5端返回blob地址 e.g. blob:http://127.0.0.1:8080/9fb99ee3-b533-47a0-9917-04804731fb58
2.在app端（測試android，ios沒測試，應該和Android一樣的）返回文件存儲地址 e.g. file:///storage/emulated/0/DCIM/image1.jpg
3.微信小程序返回地址時服務器臨時圖片地址 e.g. http://tmp/wx1679d8dc40692733.o6zAJs4Evck8rMa6KlPZ4dGYI0Ps.t3jkFi3eZEG4475ab2f73a8289586958242bff38a925.jpg 微信里面上傳到時oss失敗，提示fail url not in domain list 應該要配置上傳地址域名白名單吧

隨便一提我是用uni.showModal調試的，在app里面還是蠻管用的

    uni.showModal({
            title: "選擇文件提示",
            content: JSON.stringify(res),
            success: function (ret) {
                if (ret.confirm) {
                    console.log("用戶點擊確定");
                } else if (ret.cancel) {
                    console.log("用戶點擊取消");
                }
            }
    });

代碼

下面是視頻上傳的代碼，簽名加密部分的js直接拷貝官方案列里面的，之后稍有修改，因為是import引入


    視頻：

crypto.js , hmac.js, sha1.js, base64.js 這幾個引入的js都有修改，修改后的代碼也會放在下面
其實就是添加了export 和 import

crypto.js

/*!
 * Crypto-JS v1.1.0
 * http://code.google.com/p/crypto-js/
 * Copyright (c) 2009, Jeff Mott. All rights reserved.
 * http://code.google.com/p/crypto-js/wiki/License
 */
// (function(){

var base64map = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

// Global Crypto object
// window.Crypto = {};
let Crypto = {};

// Crypto utilities
var util = Crypto.util = {

    // Bit-wise rotate left
    rotl: function (n, b) {
        return (n << b) | (n >>> (32 - b));
    },

    // Bit-wise rotate right
    rotr: function (n, b) {
        return (n << (32 - b)) | (n >>> b);
    },

    // Swap big-endian to little-endian and vice versa
    endian: function (n) {

        // If number given, swap endian
        if (n.constructor == Number) {
            return util.rotl(n,  8) & 0x00FF00FF |
                   util.rotl(n, 24) & 0xFF00FF00;
        }

        // Else, assume array and swap all items
        for (var i = 0; i < n.length; i++)
            n[i] = util.endian(n[i]);
        return n;

    },

    // Generate an array of any length of random bytes
    randomBytes: function (n) {
        for (var bytes = []; n > 0; n--)
            bytes.push(Math.floor(Math.random() * 256));
        return bytes;
    },

    // Convert a string to a byte array
    stringToBytes: function (str) {
        var bytes = [];
        for (var i = 0; i < str.length; i++)
            bytes.push(str.charCodeAt(i));
        return bytes;
    },

    // Convert a byte array to a string
    bytesToString: function (bytes) {
        var str = [];
        for (var i = 0; i < bytes.length; i++)
            str.push(String.fromCharCode(bytes[i]));
        return str.join("");
    },

    // Convert a string to big-endian 32-bit words
    stringToWords: function (str) {
        var words = [];
        for (var c = 0, b = 0; c < str.length; c++, b += 8)
            words[b >>> 5] |= str.charCodeAt(c) << (24 - b % 32);
        return words;
    },

    // Convert a byte array to big-endian 32-bits words
    bytesToWords: function (bytes) {
        var words = [];
        for (var i = 0, b = 0; i < bytes.length; i++, b += 8)
            words[b >>> 5] |= bytes[i] << (24 - b % 32);
        return words;
    },

    // Convert big-endian 32-bit words to a byte array
    wordsToBytes: function (words) {
        var bytes = [];
        for (var b = 0; b < words.length * 32; b += 8)
            bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF);
        return bytes;
    },

    // Convert a byte array to a hex string
    bytesToHex: function (bytes) {
        var hex = [];
        for (var i = 0; i < bytes.length; i++) {
            hex.push((bytes[i] >>> 4).toString(16));
            hex.push((bytes[i] & 0xF).toString(16));
        }
        return hex.join("");
    },

    // Convert a hex string to a byte array
    hexToBytes: function (hex) {
        var bytes = [];
        for (var c = 0; c < hex.length; c += 2)
            bytes.push(parseInt(hex.substr(c, 2), 16));
        return bytes;
    },

    // Convert a byte array to a base-64 string
    bytesToBase64: function (bytes) {

        // Use browser-native function if it exists
        if (typeof btoa == "function") return btoa(util.bytesToString(bytes));

        var base64 = [],
            overflow;

        for (var i = 0; i < bytes.length; i++) {
            switch (i % 3) {
                case 0:
                    base64.push(base64map.charAt(bytes[i] >>> 2));
                    overflow = (bytes[i] & 0x3) << 4;
                    break;
                case 1:
                    base64.push(base64map.charAt(overflow | (bytes[i] >>> 4)));
                    overflow = (bytes[i] & 0xF) << 2;
                    break;
                case 2:
                    base64.push(base64map.charAt(overflow | (bytes[i] >>> 6)));
                    base64.push(base64map.charAt(bytes[i] & 0x3F));
                    overflow = -1;
            }
        }

        // Encode overflow bits, if there are any
        if (overflow != undefined && overflow != -1)
            base64.push(base64map.charAt(overflow));

        // Add padding
        while (base64.length % 4 != 0) base64.push("=");

        return base64.join("");

    },

    // Convert a base-64 string to a byte array
    base64ToBytes: function (base64) {

        // Use browser-native function if it exists
        if (typeof atob == "function") return util.stringToBytes(atob(base64));

        // Remove non-base-64 characters
        base64 = base64.replace(/[^A-Z0-9+/]/ig, "");

        var bytes = [];

        for (var i = 0; i < base64.length; i++) {
            switch (i % 4) {
                case 1:
                    bytes.push((base64map.indexOf(base64.charAt(i - 1)) << 2) |
                               (base64map.indexOf(base64.charAt(i)) >>> 4));
                    break;
                case 2:
                    bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0xF) << 4) |
                               (base64map.indexOf(base64.charAt(i)) >>> 2));
                    break;
                case 3:
                    bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0x3) << 6) |
                               (base64map.indexOf(base64.charAt(i))));
                    break;
            }
        }

        return bytes;

    }

};

// Crypto mode namespace
Crypto.mode = {};

// })();

export default Crypto;

hmac.js

import Crypto from "@/common/utils/crypto1/crypto/crypto.js";
/*!
 * Crypto-JS v1.1.0
 * http://code.google.com/p/crypto-js/
 * Copyright (c) 2009, Jeff Mott. All rights reserved.
 * http://code.google.com/p/crypto-js/wiki/License
 */
(function(){

// Shortcut
var util = Crypto.util;

Crypto.HMAC = function (hasher, message, key, options) {

    // Allow arbitrary length keys
    key = key.length > hasher._blocksize * 4 ?
          hasher(key, { asBytes: true }) :
          util.stringToBytes(key);

    // XOR keys with pad constants
    var okey = key,
        ikey = key.slice(0);
    for (var i = 0; i < hasher._blocksize * 4; i++) {
        okey[i] ^= 0x5C;
        ikey[i] ^= 0x36;
    }

    var hmacbytes = hasher(util.bytesToString(okey) +
                           hasher(util.bytesToString(ikey) + message, { asString: true }),
                           { asBytes: true });
    return options && options.asBytes ? hmacbytes :
           options && options.asString ? util.bytesToString(hmacbytes) :
           util.bytesToHex(hmacbytes);

};

})();

sha1.js

import Crypto from "@/common/utils/crypto1/crypto/crypto.js";
/*!
 * Crypto-JS v1.1.0
 * http://code.google.com/p/crypto-js/
 * Copyright (c) 2009, Jeff Mott. All rights reserved.
 * http://code.google.com/p/crypto-js/wiki/License
 */
(function(){

// Shortcut
var util = Crypto.util;

// Public API
var SHA1 = Crypto.SHA1 = function (message, options) {
    var digestbytes = util.wordsToBytes(SHA1._sha1(message));
    return options && options.asBytes ? digestbytes :
           options && options.asString ? util.bytesToString(digestbytes) :
           util.bytesToHex(digestbytes);
};

// The core
SHA1._sha1 = function (message) {

    var m  = util.stringToWords(message),
        l  = message.length * 8,
        w  =  [],
        H0 =  1732584193,
        H1 = -271733879,
        H2 = -1732584194,
        H3 =  271733878,
        H4 = -1009589776;

    // Padding
    m[l >> 5] |= 0x80 << (24 - l % 32);
    m[((l + 64 >>> 9) << 4) + 15] = l;

    for (var i = 0; i < m.length; i += 16) {

        var a = H0,
            b = H1,
            c = H2,
            d = H3,
            e = H4;

        for (var j = 0; j < 80; j++) {

            if (j < 16) w[j] = m[i + j];
            else {
                var n = w[j-3] ^ w[j-8] ^ w[j-14] ^ w[j-16];
                w[j] = (n << 1) | (n >>> 31);
            }

            var t = ((H0 << 5) | (H0 >>> 27)) + H4 + (w[j] >>> 0) + (
                     j < 20 ? (H1 & H2 | ~H1 & H3) + 1518500249 :
                     j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 :
                     j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 :
                              (H1 ^ H2 ^ H3) - 899497514);

            H4 =  H3;
            H3 =  H2;
            H2 = (H1 << 30) | (H1 >>> 2);
            H1 =  H0;
            H0 =  t;

        }

        H0 += a;
        H1 += b;
        H2 += c;
        H3 += d;
        H4 += e;

    }

    return [H0, H1, H2, H3, H4];

};

// Package private blocksize
SHA1._blocksize = 16;

})();

base64.js

export const Base64 = {

        // private property
        _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

        // public method for encoding
        encode : function (input) {
            var output = "";
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
            var i = 0;

            input = Base64._utf8_encode(input);

            while (i < input.length) {

                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);

                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;

                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }

                output = output +
                this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
                this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

            }

            return output;
        },

        // public method for decoding
        decode : function (input) {
            var output = "";
            var chr1, chr2, chr3;
            var enc1, enc2, enc3, enc4;
            var i = 0;

            input = input.replace(/[^A-Za-z0-9+/=]/g, "");

            while (i < input.length) {

                enc1 = this._keyStr.indexOf(input.charAt(i++));
                enc2 = this._keyStr.indexOf(input.charAt(i++));
                enc3 = this._keyStr.indexOf(input.charAt(i++));
                enc4 = this._keyStr.indexOf(input.charAt(i++));

                chr1 = (enc1 << 2) | (enc2 >> 4);
                chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                chr3 = ((enc3 & 3) << 6) | enc4;

                output = output + String.fromCharCode(chr1);

                if (enc3 != 64) {
                    output = output + String.fromCharCode(chr2);
                }
                if (enc4 != 64) {
                    output = output + String.fromCharCode(chr3);
                }

            }

            output = Base64._utf8_decode(output);

            return output;

        },

        // private method for UTF-8 encoding
        _utf8_encode : function (string) {
            string = string.replace(/
/g,"
");
            var utftext = "";

            for (var n = 0; n < string.length; n++) {

                var c = string.charCodeAt(n);

                if (c < 128) {
                    utftext += String.fromCharCode(c);
                }
                else if((c > 127) && (c < 2048)) {
                    utftext += String.fromCharCode((c >> 6) | 192);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
                else {
                    utftext += String.fromCharCode((c >> 12) | 224);
                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                    utftext += String.fromCharCode((c & 63) | 128);
                }

            }

            return utftext;
        },

        // private method for UTF-8 decoding
        _utf8_decode : function (utftext) {
            var string = "";
            var i = 0;
            var c = c1 = c2 = 0;

            while ( i < utftext.length ) {

                c = utftext.charCodeAt(i);

                if (c < 128) {
                    string += String.fromCharCode(c);
                    i++;
                }
                else if((c > 191) && (c < 224)) {
                    c2 = utftext.charCodeAt(i+1);
                    string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                    i += 2;
                }
                else {
                    c2 = utftext.charCodeAt(i+1);
                    c3 = utftext.charCodeAt(i+2);
                    string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                    i += 3;
                }

            }

            return string;
        }

    }

云服務器 oss直傳采坑記 uni-app 阿里云oss

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103077.html

oss web直傳服務器簽名 - vue版本

摘要：前言為了減輕服務器壓力，采用直傳的方式，直接把資源圖片，文件，視頻等上傳到阿里云服務器。這個是需要觸發這個回調來通知服務器操作結果。服務器端同事調的，通過接口返回給前端的。這個就是簽名，最關鍵的。的的使用如下結束這樣就搞定了。前言：為了減輕服務器壓力，采用web直傳的方式，直接把資源(圖片，文件，視頻等)上傳到阿里云oss服務器。但是阿里只提供 plupload.js 環境下的 d...

Sunxb 2019-08-23 18:06 評論0 收藏0
圖片直傳阿里云OSS方案

摘要：和數據直傳到相比，以上方法有三個缺點上傳慢。端向服務端請求簽名，然后直接上傳，不會對服務端產生壓力，而且安全可靠。規定返回數據的格式，當前默認返回圖片信息寬度高度，可獲取更多數據。背景每個OSS的用戶都會用到上傳服務。Web端常見的上傳方法是用戶在瀏覽器或app端上傳文件到應用服務器，然后應用服務器再把文件上傳到OSS。 showImg(https://segmentfault.c...

imtianx 2019-08-23 12:49 評論0 收藏0
阿里云 oss 圖片上傳解決方案 vue （web直傳）

摘要：我們通過這個去解決該文章主要介紹如何獲取和這兩個參數首先下載直傳的案例解壓后打開里面的完成后就可以用瀏覽器打開按下點到選項，效果如圖我們隨便選擇一個圖片上傳然后配合來解決圖片上傳我們通過aliyun-oss-web這個npm去解決該文章主要介紹如何獲取 imgSignature 和 imgPolicy 這兩個參數首先下載 web直傳的案例： http://files.cnblo...

kyanag 2019-08-23 17:04 評論0 收藏0
Web端文件上傳至阿里云OSS（基于Angular 5項目）

摘要：一準備工作開通阿里云服務，從控制臺上獲取和。參考資料阿里云官方文檔開始使用阿里云官方文檔介紹如何在中快速使用訪問服務微信公眾號圖片上傳至阿里云前端圖片直傳試驗如何基于和，快速搭建音視頻文件上傳服務聲明轉發請注明出處，謝謝一、準備工作 1. 開通阿里云OSS服務，從控制臺上獲取AccessKeyId和AccessKeySecret。 2. 創建Bucket，并登錄OSS控制臺 3. 配...

darkerXi 2019-08-23 13:56 評論0 收藏0

發表評論

登陸后可評論

0條評論

LeanCloud

男|高級講師

我要關注我要私信

TA的文章

C語言中數據的存儲

閱讀 2675·2021-11-25 09:43
Python | Numpy：詳解計算矩陣的均值和標準差

閱讀 2587·2021-11-22 09:34
Badboy

閱讀 2856·2021-11-12 10:34
從織夢DedeCMS商業授權看未來開源程序選擇策略

閱讀 1442·2021-10-20 13:46
CSS考點之一，<a>標簽，偽類

閱讀 2307·2019-08-30 13:21
使用js-xlsx純前端導出excel

閱讀 935·2019-08-30 11:21
Css清除浮動的方法總結

閱讀 488·2019-08-30 11:20
原生js實現手機端導航滑動效果

閱讀 2192·2019-08-29 17:20

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

uni-app 阿里云oss直傳采坑記錄

相關文章

oss web直傳服務器簽名 - vue版本

**圖片直傳阿里云OSS方案**

**阿里云 oss 圖片上傳解決方案 vue （web直傳）**

**Web端文件上傳至阿里云OSS（基于Angular 5項目）**

發表評論

0條評論

LeanCloud

男|高級講師

TA的文章

C語言中數據的存儲

Python | Numpy：詳解計算矩陣的均值和標準差

Badboy

從織夢DedeCMS商業授權看未來開源程序選擇策略

CSS考點之一，<a>標簽，偽類

使用js-xlsx純前端導出excel

Css清除浮動的方法總結

原生js實現手機端導航滑動效果

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

uni-app 阿里云oss直傳 采坑記錄

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

uni-app 阿里云oss直傳采坑記錄