使用uniapp開發(fā)微信小程序通過STS直傳阿里云OSS

看了看阿里云官方文檔后簡單封裝了一下,方便以后使用

aliOssSts.js

/**
 * 微信小程序通過STS直傳阿里云OSS
 *(uniapp版上傳理朋,小程序原生需要將uni.XXX替換為wx.XXX)
 * 
 * @param {filePath} 圖片臨時地址
 * @param {option|Object} OSS和STS配置
 * @param {savePath} oss中的文件目錄
 * @param {AccessKeySecret} 服務(wù)端返回的STS中的AccessKeySecret
 * @param {SecurityToken} 服務(wù)端返回的STS中的SecurityToken
 * @param {AccessKeyId} 服務(wù)端返回的STS中的AccessKeyId
 * @param {bucket} 存儲桶
 * @param {area} 地區(qū)
 * @return {string|boolean} 成功返回文件地址絮识,失敗返回false
 */

import crypto from 'crypto-js';
import {
    Base64
} from 'js-base64/base64.js';

function upload(filePath, option = {
    savePath,
    AccessKeySecret,
    SecurityToken,
    AccessKeyId,
    bucket,
    area
}, callBack = () => {}) {
    let fileType = filePath.split(".").pop();
    let filename = option.savePath + "/" + createFileName(32) + "." + fileType;


    const date = new Date();
    date.setHours(date.getHours() + 1);
    const policyText = {
        expiration: date.toISOString(), // 設(shè)置policy過期時間。
        conditions: [
            ["content-length-range", 0, 1024 * 1024 * 1024],
        ],
    };
    const policy = Base64.encode(JSON.stringify(policyText)) // policy必須為base64的string嗽上。
    const signature = computeSignature(option.AccessKeySecret, policy)
    const formData = {
        OSSAccessKeyId: option.AccessKeyId,
        signature,
        policy,
        'x-oss-security-token': option.SecurityToken,
        key: filename,
        success_action_status: 200
    }

    uni.uploadFile({
        url: "https://" + option.bucket +
            "." + option.area + ".aliyuncs.com",
        filePath: filePath,
        name: "file",
        formData: formData,
        success: (res) => {
            let ossFileName = false;
            if (res.statusCode === 200) {
                console.log('上傳成功');
                ossFileName = "https://" + option.bucket +
                    "." + option.area + ".aliyuncs.com/" +
                    filename;
            }
            callBack(ossFileName);
        },
        fail: err => {
            console.log(err);
            callBack(false);
        }
    })
}




// 簽名
function computeSignature(accessKeySecret, canonicalString) {
    return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
}

// 生成隨機(jī)文件名
function createFileName(length) {
    const data = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
    ];
    let nums = "";
    for (let i = 0; i < length; i++) {
        const r = parseInt(Math.random() * 61, 10);
        nums += data[r];
    }
    return nums;
}




export default {
    upload
}

使用callback的方式獲取上傳結(jié)果

<script>
import AliOss from "@/存放路徑/aliOssSts.js";
export default {
    data() {
        return {
            // OSS STS數(shù)據(jù)
            ossData: [],
        };
    },
    onLoad() {
        // 向后端請求STS信息
        this.getSts();
    },
    methods: {
        getSts() {
            let _this = this;
            this.request.get(this.api.sts).then((res) => {
                _this.ossData = res;
            });
        },
        chooseImage() {
            let _this = this;
            uni.chooseImage({
                count: 1,
                sizeType: ["compressed", "camera"],
                sourceType: ["album"],
                success: function (res) {
                    if (res.errMsg == "chooseImage:ok") {
                        let filePath = res.tempFiles[0].path;
                        let option = {
                            savePath: "image",
                            AccessKeySecret: _this.ossData.AccessKeySecret,
                            SecurityToken: _this.ossData.SecurityToken,
                            AccessKeyId: _this.ossData.AccessKeyId,
                            bucket: _this.ossData.bucket,
                            area: "oss-cn-beijing",
                        };
                        AliOss.upload(filePath, option, function (res) {
                            if (res) {
                                console.log(res);
                            } else {
                                _this.Fun.tip("圖片上傳失敗,請稍后重試");
                            }
                        });
                    } else {
                        _this.Fun.tip("圖片選擇失敗");
                    }
                },
            });
        },
    },
};
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末熄攘,一起剝皮案震驚了整個濱河市兽愤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖浅萧,帶你破解...
    沈念sama閱讀 212,294評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件逐沙,死亡現(xiàn)場離奇詭異,居然都是意外死亡洼畅,警方通過查閱死者的電腦和手機(jī)吩案,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,493評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來帝簇,“玉大人徘郭,你說我怎么就攤上這事∩ル龋” “怎么了残揉?”我有些...
    開封第一講書人閱讀 157,790評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長芋浮。 經(jīng)常有香客問我抱环,道長,這世上最難降的妖魔是什么纸巷? 我笑而不...
    開封第一講書人閱讀 56,595評論 1 284
  • 正文 為了忘掉前任镇草,我火速辦了婚禮,結(jié)果婚禮上瘤旨,老公的妹妹穿的比我還像新娘陶夜。我一直安慰自己,他們只是感情好裆站,可當(dāng)我...
    茶點故事閱讀 65,718評論 6 386
  • 文/花漫 我一把揭開白布条辟。 她就那樣靜靜地躺著,像睡著了一般宏胯。 火紅的嫁衣襯著肌膚如雪羽嫡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,906評論 1 290
  • 那天肩袍,我揣著相機(jī)與錄音杭棵,去河邊找鬼。 笑死氛赐,一個胖子當(dāng)著我的面吹牛魂爪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播艰管,決...
    沈念sama閱讀 39,053評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼滓侍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了牲芋?” 一聲冷哼從身側(cè)響起吓妆,我...
    開封第一講書人閱讀 37,797評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎粟耻,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體氮兵,經(jīng)...
    沈念sama閱讀 44,250評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,570評論 2 327
  • 正文 我和宋清朗相戀三年歹鱼,在試婚紗的時候發(fā)現(xiàn)自己被綠了泣栈。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,711評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡弥姻,死狀恐怖南片,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蚁阳,我是刑警寧澤铃绒,帶...
    沈念sama閱讀 34,388評論 4 332
  • 正文 年R本政府宣布,位于F島的核電站螺捐,受9級特大地震影響颠悬,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜定血,卻給世界環(huán)境...
    茶點故事閱讀 40,018評論 3 316
  • 文/蒙蒙 一赔癌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧澜沟,春花似錦灾票、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,796評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至濒析,卻和暖如春正什,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背号杏。 一陣腳步聲響...
    開封第一講書人閱讀 32,023評論 1 266
  • 我被黑心中介騙來泰國打工婴氮, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人盾致。 一個月前我還...
    沈念sama閱讀 46,461評論 2 360
  • 正文 我出身青樓主经,卻偏偏與公主長得像,于是被迫代替她去往敵國和親庭惜。 傳聞我的和親對象是個殘疾皇子罩驻,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,595評論 2 350

推薦閱讀更多精彩內(nèi)容