【小程序】--- 图片上传到COS(腾讯云)

以下为封装的js文件,上传时引入该文件,调用uploadFile方法传入图片临时地址,callback中接收上传后的网络地址;
(js的sdk的使用方式基本和小程序的差不多,不过上传后的访问地址不是callback返回的,而是需要自己根据前缀和图片名手动拼接)

const app = getApp();
const { $req } = require('./request.js');   // $req方法为对微信request方法的封装,这里就不过多赘述了
const COS = require('../static/js/cos-wx-sdk-v5-min.js');   // 引入sdk
const Bucket = 'xxx-11111111';   // 这里填你存储桶名称
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 时间前,不会再次调用 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,
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 13,956评论 0 15
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,148评论 1 32
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,758评论 1 45
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,342评论 0 3
  • 去外聚餐后剩下的饭菜该不该打包?说三点我的看法。1.《开讲啦》有一期金士杰老师讲的课我有幸能够听到,如果你看过《绣...
    电影宝藏阅读 174评论 0 20