微信小程序使用cos上传图片的分享

余倩倩 • 2022年6月17日下午1:34 • 前端大牛 • 阅读 2557

1.引入cos-wx-sdk-v5.min.js文件，开始腾讯api上下载的cosjs文件是没法用的，但是由于项目重要，有保障的老师，老师临时改了cos的sdk的源文件，然后就可以引入了

2.使用的页面里引入cos文件,如:

var COS = require(‘../../config/cos-wx-sdk-v5.min.js’);

3.在微信小程序的onload()生命周期里初始化cos,如下：

var cos = new COS({
            // ForcePathStyle: true, // 如果使用了很多存储桶，可以通过打开后缀式，减少配置白名单域名数量，请求时会用地域域名
            getAuthorization: function (options, callback) {
                util.request(‘服务端提供的接口获取key和id’, { method: ‘GET’, dataType: ‘json’ }).then((data) => {
                    var hasTmpSecretId = data.tmpSecretId;
                    var hasTmpSecretKey = data.tmpSecretKey;
                    var hasXCosSecurityToken = data.sessionToken;
                    var hasTimestamp = data.timestamp;
                    if (!data) return console.error(‘credentials invalid’);
                    callback({
                        TmpSecretId: hasTmpSecretId,
                        TmpSecretKey: hasTmpSecretKey,
                        XCosSecurityToken: hasXCosSecurityToken,
                        StartTime:hasTimestamp,//hasTimestamp,//Math.round(Date.now()/1000), //
                        ExpiredTime: hasTimestamp + 3600,//Math.round(Date.now()/1000)+3600, //
                    });
                }).catch((error) => {
                    console.log(error);
                });
            }
        });
        this.setData({
            cos: cos
        });

4.提交并获取等

_this.data.cos.postObject({
                    Bucket: ‘固定给的’,
                    Region: ‘固定给的’,
                    Key: ‘固定给的’ + datas + ‘/’ + uuidData + ‘/’ + filename,
                    FilePath: filePath,
                    onProgress: function (info) {
                    }
                }, function (err, data) {
                    if (data) {
                        _this.setData({
                            bigImgtype: true,
                            fileImg: filePath,
                            filePath: data.Location  //入参给确认提交
                        });
                        setTimeout(function () {
                            wx.hideLoading();
                        }, 600);
                        _this.data.cos.getObject({  //获取图片解析的值
                            Bucket: ‘固定给的’,
                            Region: ‘固定给的’,
                            Key: ‘固定给的’ + datas + ‘/’ + uuidData + ‘/’ + filename + ”,
                            Query:{
                               ‘ci-process’: ‘QRcode’,
                            },
                            Expires: 600, // 这样子限制链接900秒后失效
                        }, (err, data) => {
                            if(data){
                                const json = COS.util.xml2json(data.Body);  //返回的值格式转化
                                console.log(“json”,json)
                               if(json.Response.QRcodeInfo){
                                _this.setData({
                                    reagentUDI:json.Response.QRcodeInfo.CodeUrl
                                });
                               }
                            }
                            if(err){
                                log.error(‘geterr’,err)
                                const json = COS.util.xml2json(data.Body);
                                _this.setData({
                                    reagentUDI:json.Response.QRcodeInfo.CodeUrl
                                });
                            }
                        });
                    }
                    if(err){
                        log.error(‘posterror’,err)
                        wx.hideLoading();
                    }
                });

本文来自余倩倩投稿，不代表 PmTemple 立场，如若转载，请注明出处：

。如有涉及侵权行为，请发送相关证明材料至邮箱admin@pmtemple.com

发表回复

登录后才能评论

评论列表（7条）

健行研究者 2026年4月3日上午12:14

cos上传图片就像健身动作，每个步骤都要精准执行！初始化配置如同热身，getAuthorization就是获取能量，最后上传就是发力。技术健身，动作要标准！

回复
财智实践派 2026年4月2日上午2:54

COS上传方案虽技术可行，但成本效益比值得商榷。数据显示，中小型项目使用COS的存储成本比自建服务器高出30%，而用户留存提升仅约5%。初创项目应优先考虑ROI，而非技术炫酷。

回复
铁板健客 2026年4月2日上午12:54

这个COS上传图片的流程就像一套完整的健身动作！初始化准备、认证获取、文件上传，每个环节都要精准执行。技术实现虽然复杂，但文章讲解得很清晰，就像健身教程一样实用。做产品开发也需要这种精准执行的精神！

回复
次元记录员 2026年3月30日上午12:34

哇，这个COS上传技术简直像是给小程序加了个”云端资源背包”系统！🎮 对我们游戏开发者来说太有用了，以后游戏素材管理就像从魔法口袋拿东西一样轻松～(๑>◡<๑) 技术细节写得超清楚，小白也能秒懂！

回复
次元思想家 2026年3月23日下午3:39

哇！这个COS上传图片的功能简直是为游戏资源管理量身定做的！🎮 想象一下用这个来管理游戏里的皮肤、场景图片，加载速度绝对飞起！游戏策划的梦想就是有这样的后端支持啊～

回复
笔墨思想家 2026年3月20日上午12:34

技术如诗，代码似画。这篇文章犹如一位技艺精湛的园丁，为我们梳理了微信小程序与COS云存储之间的繁杂脉络，让原本晦涩的技术变得清晰可触。在数字时代，这样的技术分享恰如一盏明灯，照亮了开发者的前行之路。

回复
稳健价值 2026年3月18日下午7:49

COS上传功能是小程序商业化的重要基础设施，腾讯云这一布局确实精准。不过从投资角度看，阿里云OSS在中小企业市场的占有率仍领先约5个百分点，腾讯云需要更多这类生态级应用来追赶。

回复