【小程序】--- 圖片上傳到COS(騰訊云)

以下為封裝的js文件,上傳時(shí)引入該文件,調(diào)用uploadFile方法傳入圖片臨時(shí)地址,callback中接收上傳后的網(wǎng)絡(luò)地址;
(js的sdk的使用方式基本和小程序的差不多,不過上傳后的訪問地址不是callback返回的,而是需要自己根據(jù)前綴和圖片名手動(dòng)拼接)

const app = getApp();
const { $req } = require('./request.js');   // $req方法為對(duì)微信request方法的封裝,這里就不過多贅述了
const COS = require('../static/js/cos-wx-sdk-v5-min.js');   // 引入sdk
const Bucket = 'xxx-11111111';   // 這里填你存儲(chǔ)桶名稱
const Region = 'ap-beijing';   // 填你的地域名稱

const cos = new COS({
    getAuthorization: function (options, callback) {
        // 異步獲取簽名
        $req({
            url: 'xxx',   // 后端簽名接口
            method: 'POST',
            success(result) {
                console.log(result);
                let data = result.data.data;
                let credentials = data.credentials;
                callback({
                    TmpSecretId: credentials.tmpSecretId,
                    TmpSecretKey: credentials.tmpSecretKey,
                    XCosSecurityToken: credentials.sessionToken,
                    ExpiredTime: data.expiredTime, // SDK 在 ExpiredTime 時(shí)間前,不會(huì)再次調(diào)用 getAuthorization
                });
            }
        })
    }
});

// 上傳文件
const uploadFile = (filePath, callback) => {
    let filename = filePath.substr(filePath.lastIndexOf('/') + 1);
    cos.postObject({
        Bucket: Bucket,
        Region: Region,
        Key: filename,
        FilePath: filePath,
        onProgress: info => {
            console.log(JSON.stringify(info));
        }
    }, (err, data) => {
        if (err === null) {
            callback(data);
        } else {
            wx.hideLoading();
            wx.showToast({
                title: '上傳失敗',
                icon: 'none'
            })
        }
    });
}

module.exports = {
    uploadFile,
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 點(diǎn)擊查看原文 Web SDK 開發(fā)手冊(cè) SDK 概述 網(wǎng)易云信 SDK 為 Web 應(yīng)用提供一個(gè)完善的 IM 系統(tǒng)...
    layjoy閱讀 14,299評(píng)論 0 15
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對(duì)...
    cosWriter閱讀 11,626評(píng)論 1 32
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,797評(píng)論 1 45
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,799評(píng)論 0 3
  • 去外聚餐后剩下的飯菜該不該打包?說三點(diǎn)我的看法。1.《開講啦》有一期金士杰老師講的課我有幸能夠聽到,如果你看過《繡...
    電影寶藏閱讀 190評(píng)論 0 20

友情鏈接更多精彩內(nèi)容