Giter VIP home page Giter VIP logo

cos-wx-sdk-v5's Introduction

快速入门

微信小程序 SDK for 腾讯云对象存储服务

一、前期准备

  1. 到 (COS对象存储控制台)[https://console.cloud.tencent.com/cos4] 创建存储桶,得到 Bucket(存储桶名称) 和 Region(地域名称)
  2. 到 (控制台密钥管理)[https://console.cloud.tencent.com/capi] 获取您的项目 SecretId 和 SecretKey

二、计算签名

由于签名计算放在前端会暴露 SecretId 和 SecretKey,我们把签名计算过程放在后端实现,前端通过 ajax 向后端获取签名结果,正式部署时请再后端加一层自己网站本身的权限检验。

这里提供 PHP 和 NodeJS 的签名例子,其他语言,请参照对应的 XML SDK

三、上传例子

  1. 把 demo/lib/cos-wx-sdk-v5.js 复制到自己小程序项目代码里,在需要上传文件的地方贴以下代码
// 存储桶名称,由bucketname-appid 组成,appid必须填入,可以在COS控制台查看存储桶名称。 https://console.cloud.tencent.com/cos5/bucket
var Bucket = 'test-1250000000';
// 存储桶Region可以在COS控制台指定存储桶的概览页查看 https://console.cloud.tencent.com/cos5/bucket/ 
// 关于地域的详情见 https://cloud.tencent.com/document/product/436/6224
var Region = 'ap-guangzhou';

// 初始化实例
var cos = new COS({
    getAuthorization: function (options, callback) {
        // 异步获取签名
        wx.request({
            url: 'https://example.com/sts.php', // 步骤二提供的签名接口
            data: {
                Method: options.Method,
                Key: options.Key
            },
            dataType: 'text',
            success: function (result) {
                var data = result.data;
                callback({
                    TmpSecretId: data.credentials && data.credentials.tmpSecretId,
                    TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
                    XCosSecurityToken: data.credentials && data.credentials.sessionToken,
                    ExpiredTime: data.expiredTime,
                });
            }
        });
    }
});

// 选择文件
wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original'], // 可以指定是原图还是压缩图,默认用原图
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    success: function (res) {
        var filePath = res.tempFiles[0].path;
        var filename = filePath.substr(filePath.lastIndexOf('/') + 1);
        cos.postObject({
            Bucket: Bucket,
            Region: Region,
            Key: filename,
            FilePath: filePath,
            onProgress: function (info) {
                console.log(JSON.stringify(info));
            }
        }, function (err, data) {
            console.log(err || data);
        });
    }
});

说明文档

使用例子

快速入门

接口文档

cos-wx-sdk-v5's People

Contributors

carsonxu avatar konakonall avatar livehigh avatar pipione avatar wonder233 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cos-wx-sdk-v5's Issues

使用sdk删除图片

报文 preview 报

访问拒绝是怎么回事?

deleteObject: function (filePath,cb) {
var Key = filePath.substr(filePath.lastIndexOf('/') + 1);
console.log(Key);
cos.deleteObject({
Bucket: config.Bucket,
Region: config.Region,
Key: Key
}, function (err, data) {
if (data) {
wx.showToast({
title: '成功',
icon: 'success',
duration: 3000
});
cb(data)
}
});

403

AccessDenied Access Denied. 2019-04-09T03:39:20Z wechat-12567014540.cos.ap-chengdu.myqcloud.com/wx3797508a5e86abc4.o6zAJswgmdYeKPMcMCHrceK2dEPg.XJUjCYfLQYu658775cd5728cea06330e944b2fa97b7b.jpg NWNhYzEzZThfNGQ5ZTU4NjRfNmFhNV83YTZjOGY= OGVmYzZiMmQzYjA2OWNhODk0NTRkMTBiOWVmMDAxODc0OWRkZjk0ZDM1NmI1M2E2MTRlY2MzZDhmNmI5MWI1OTQyYWVlY2QwZTk2MDVmZDQ3MmI2Y2I4ZmI5ZmM4ODFjYjEzMGU3N2I0OTJjYTAwYWExNjJhODI1NTRkOGZlM2Y=

Code: "InvalidArgument", Message: "x-cos-acl value invalid:[object Undefined]"

最新版本。
// 方法二(适用于前端调试)
var authorization = COS.getAuthorization
前端测试方法。

cos.postObject({
Bucket: config.Bucket, Region: config.Region, Key: Key,
FilePath: res.tempFilePath,
TaskReady: function (taskId) {
TaskId = taskId
},
onProgress: function (info) {
console.log(JSON.stringify(info));
}
}, requestCallback);
一直报错诶。
Code: "InvalidArgument", Message: "x-cos-acl value invalid:[object Undefined]"

返回结果的Location与实际的对象地址不一致

调用postObject上传文件,如果文件名带有特殊符号,例如等号“=”。
在返回的Location中,“=”会变成"%3D";
但是在腾讯云控制台可以看到,实际的地址中,“=”是变成了“%253D”。

从调试器看到,之前的版本post请求是直接发"="的,现在的版本发的是编码后的“%3D”。明显sdk多做了一个步骤。

Pic-Operations 是否在postobject 可以被支持

文档里没有看到可以在上传图片的时候如何做持久化操作,请问是否sdk支持使用postobject上传图片的时候对文件做持久化处理,感谢!

用的是sdk, 看了下代码,postobject 没有处理持久化操作的 “Pic-Operations” header,新版本可以考虑添加么,因为想在上传图片的时候,使用数据万象操作图片比如缩略等等,感谢您的回复

postObject不能自定义headers

代码如下:

        cos.postObject({
          Bucket: cosConfig.Bucket,
          Region: cosConfig.Region,
          Key: path + name,
          FilePath: tmpPath,
          'x-cos-meta-sskey': sskey,
          'x-cos-meta-token': token,
          'x-cos-meta-tagid': 2,
          TaskReady: (taskId) => {
            console.log('t id', taskId);
          },
          onProgress: (info) => {
            console.log(JSON.stringify(info));
          },
        })

小程序调试报了错:
image

scf无服务器云函数里也没有自定义的headers:
image

直接下载demo/lib/cos-wx-sdk-v5.js会有错

我这边使用demo/lib/cos-wx-sdk-v5.js,直接下载了项目,然后copy出来这个js到我的项目, 签名没有带到后端. 报错403, AccessDenied.

然后排查了所有可能地地方后, 都没用,最后直接把仓库里得js文件, 全文copy下来. 就ok了.

找了一天多得原因, 头都秃了

取不到上传后的回调

WeChata75ba07bd1d4d722403f2390481536f1

WeChat4c493bc37360cb9e8ca1d5f680c8a695

图一使用es5的写法也不行,关键是有两个项目,一个项目可以取到回调,另一个项目无法取得回调,版本尝试过0.6.0与0.7.1,均无法取得回调

Pic-Operations 是否在postobject 可以被支持

copy #38 #38

文档里没有看到可以在上传图片的时候如何做持久化操作,请问是否sdk支持使用postobject上传图片的时候对文件做持久化处理,感谢!

用的是sdk, 看了下代码,postobject 没有处理持久化操作的 “Pic-Operations” header,新版本可以考虑添加么,因为想在上传图片的时候,使用数据万象操作图片比如缩略等等,感谢您的回复

postobject方法中有一段过滤headers的代码,感觉是不支持的吧

for (var key in params) {
        if (key.indexOf('x-cos-meta-') > -1) {
            headers[key] = params[key];
        }
    }

以下为postobject方法代码

function postObject(params, callback) {
    var self = this;
    var headers = {};
    var filePath = params.FilePath;
    if (!filePath) {
        callback({error: 'missing param FilePath'});
        return;
    }

    headers['Cache-Control'] = params['CacheControl'];
    headers['Content-Disposition'] = params['ContentDisposition'];
    headers['Content-Encoding'] = params['ContentEncoding'];
    headers['Content-MD5'] = params['ContentMD5'];
    headers['Content-Length'] = params['ContentLength'];
    headers['Content-Type'] = params['ContentType'];
    headers['Expect'] = params['Expect'];
    headers['Expires'] = params['Expires'];
    headers['x-cos-acl'] = params['ACL'];
    headers['x-cos-grant-read'] = params['GrantRead'];
    headers['x-cos-grant-write'] = params['GrantWrite'];
    headers['x-cos-grant-full-control'] = params['GrantFullControl'];
    headers['x-cos-storage-class'] = params['StorageClass'];

    // 删除 Content-Length 避免签名错误
    delete headers['Content-Length'];
    delete headers['content-length'];

    for (var key in params) {
        if (key.indexOf('x-cos-meta-') > -1) {
            headers[key] = params[key];
        }
    }

    var onProgress = util.throttleOnProgress.call(self, headers['Content-Length'], params.onProgress);

    submitRequest.call(this, {
        Action: 'name/cos:PostObject',
        method: 'POST',
        Bucket: params.Bucket,
        Region: params.Region,
        Key: params.Key,
        headers: headers,
        qs: params.Query,
        filePath: filePath,
        onProgress: onProgress,
    }, function (err, data) {
        onProgress(null, true);
        if (err) return callback(err);
        if (data && data.headers) {
            var headers = data.headers;
            var ETag = headers.etag || headers.Etag || headers.ETag || '';
            var filename = filePath.substr(filePath.lastIndexOf('/') + 1);
            var url = getUrl({
                ForcePathStyle: self.options.ForcePathStyle,
                protocol: self.options.Protocol,
                domain: self.options.Domain,
                bucket: params.Bucket,
                region: params.Region,
                object: params.Key.replace(/\$\{filename\}/g, filename),
                isLocation: true,
            });

            return callback(null, {
                Location: url,
                statusCode: data.statusCode,
                headers: headers,
                ETag: ETag,
            });
        }
        callback(null, data);
    });
}

按需加载的需求

有没有可能改成按需加载的模式?小程序主包空间寸土寸金啊

是 options.Key和options.Method吗?

// 初始化实例
var cos = new COS({
getAuthorization: function (options, callback) {
// 异步获取签名
wx.request({
url: 'https://example.com/sign', // 步骤二提供的签名接口
data: {
Method: params.Method,
Key: params.Key
},
dataType: 'text',
success: function (result) {
callback(result.data);
}
});
}
});

AccessDenied 问题

能帮忙看看这条记录的问题吗?

使用版本:

cos-wx-sdk-v5.1.js

结果

statusCode: 403

<Error>
	<Code>AccessDenied</Code>
	<Message>Access Denied.</Message>
	<ServerTime>2019-07-19T11:10:53Z</ServerTime>
	<Resource>XXX</Resource>
	<RequestId>NWQzMWE1M2RfMTlhYTk0MGFfYjc1Zl8yODc3ZDA=</RequestId>
	<TraceId>OGVmYzZiMmQzYjA2OWNhODk0NTRkMTBiOWVmMDAxODc0OWRkZjk0ZDM1NmI1M2E2MTRlY2MzZDhmNmI5MWI1OTQyYWVlY2QwZTk2MDVmZDQ3MmI2Y2I4ZmI5ZmM4ODFjYjEzMGU3N2I0OTJjYTAwYWExNjJhODI1NTRkOGZlM2Y=</TraceId>
</Error>

getBucket方法加Prefix前缀参数并没有传递到request中

function getBucket(params, callback) {
    var reqParams = {};
    reqParams['prefix'] = params['Prefix'];
    reqParams['delimiter'] = params['Delimiter'];
    reqParams['marker'] = params['Marker'];
    reqParams['max-keys'] = params['MaxKeys'];
    reqParams['encoding-type'] = params['EncodingType'];

    submitRequest.call(this, {
        method: 'GET',
        Bucket: params.Bucket,
        Region: params.Region,
        AppId: params.AppId,
        qs: reqParams,
    }
function submitRequest(params, callback) {
    var bucket = params.Bucket;
    var region = params.Region;
    var object = params.Key;
    var action = params.action;
    var method = params.method || 'GET';
    var headers = params.headers || {};
    var url = params.url;
    var body = params.body;
    var filePath = params.filePath;
    var json = params.json;
    var rawBody = params.rawBody;
    var qs = params.qs;
var request = function (params, callback) {
    var filePath = params.filePath;
    var headers = params.headers;
    var url = params.url;
    var method = params.method;
    var onProgress = params.onProgress;
    var requestTask;

    var cb = function (err, response) {
        callback(err, {statusCode: response.statusCode, headers: response.header}, response.data);
    };

    if (filePath) {
        var m = url.match(/^(https?:\/\/[^/]+\/)(.*)$/);
        var key = m[2] || '';
        url = m[1];

        requestTask = wx.uploadFile({
            url: url,
            method: method,
            name: 'file',
            filePath: filePath,
            formData: {
                'key': key,
                'success_action_status': 200,
                'Signature': headers.Authorization
            },
            success: function (response) {
                cb(null, response);
            },
            fail: function (response) {
                cb(response.errMsg, response);
            }
        });
        requestTask.onProgressUpdate(function (res) {
            onProgress({
                loaded: res.totalBytesSent,
                total: res.totalBytesExpectedToSend,
                progress: res.progress / 100
            });
        });
    } else {
        wx.request({
            url: url,
            method: method,
            header: headers,
            dataType: 'text',
            success: function (response) {
                cb(null, response);
            },
            fail: function (response) {
                cb(response.errMsg, response);
            }
        });
    }

prefix参数在submitRequest中是以qs对象传进去的,但是在request方法中并没有使用到qs对象,导致getBucket方法传递Prefix参数无效。

getObject回调 data.Body undefined

(不好意思,上次Issues写错位置了)
我用的就是v5版本,getObject回调data.Body undefined,cos-wx-sdk-v5更换为其他来源的后就没问题。
烦请你看看

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.