tencentyun / cos-js-sdk-v5 Goto Github PK
View Code? Open in Web Editor NEW腾讯云 COS JS SDK(XML API)
Home Page: https://cloud.tencent.com/product/cos
License: MIT License
腾讯云 COS JS SDK(XML API)
Home Page: https://cloud.tencent.com/product/cos
License: MIT License
前端Vue通过cos-js-sdk-v5构造之后发送请求,浏览器会先发出一个OPTIONS请求,然后返回403跨域被直接拦截,控制台也没有配置OPTIONS跨域的方式,这种要怎么处理,只能后端Java上传吗?
import COS from 'cos-js-sdk-v5'
this.cos = new COS({
getAuthorization: function (options, callback) {
vueHttp.getTmpSecret().then(res => {
callback({
TmpSecretId: res.data.secretId,
TmpSecretKey: res.data.secretKey,
XCosSecurityToken: res.data.sessionToken,
ExpiredTime: res.data.expiredTime
})
})
}
})
_this.cos.sliceUploadFile({
Bucket: _this.Bucket,
Region: _this.Region,
Key: item.cname,
Body: item
}, function (err, data) {
console.log(err, data)
})`
V5 没有getFolderList了?
每上传一个文件都要去拿一次token,这样太麻烦了,而且会给后台服务器造成压力。
能否像七牛一样,后台返回一个有过期时间的token,在有效期内用一个token上传多个文件呢?
sdk uncaught third Error
Cannot read property 'userAgent' of undefined
V4版本的插件在IE11浏览器下面会出现readAsBinaryString方法不存在的情况,导致分片上传的时候出错。如果我还在使用V4版本,在不打算使用新版本的情况下,我该如何去解决这个问题。
message: (60024)you are not resource owner
找遍文档找不到处理方法
https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/sts-auth.php
理解起来还是挺费劲的,有没有现成的sdk可以做这个事情,帮助生成签名 就好
在Vux项目里安装了cos-js-sdk-v5,先引用COS,然后实例化出错。
import { COS } from 'cos-js-sdk-v5'
const cos = new COS(...)
出错信息是:
Uncaught TypeError: E.COS is not a constructor
在本地测试,本人谷歌浏览器版本 71.0.3578.80(正式版本) (32 位)测试正常,放到线上运行后,也可以的。后来另外一个同事使用,他电脑 平时用360浏览器,使用上传时一直返回403,后来重新下载了个谷歌浏览器又可以用,就是360浏览器用不了,又找了一台电脑 ,电脑用的也是谷歌浏览器,版本不是最新的,也同样返回403,SignatureDoesNotMatch
The Signature you specified is invalid.,把谷歌浏览器升级到最新的版本,又能正常使用,请问这个问题怎么破。
求重新加上,不然我换v5 就要把调用的方法都改了。
要做好兼容处理啊
首先Authorization是一串这样的签名:q-sign-algorithm=sha1&q-ak=AKIDYw63nIGcR2PYTAosseCWcU9ZljTyJH5k&q-sign-time=1545045621;1545047481&q-key-time=1545045621;1545047481&q-header-list=host&q-url-param-list=&q-signature=a7e287c8fa1704c35fdb8cace9b2956ea6d056c4
这个官方提供的第一种方式:这个是向后台拿到临时密钥,在分片上传的时候(每一个请求)Authorization都是不一样的,我可以理解为每次请求的时候由这个包计算出来的。这种方式是可以走通的。
这个官方提供的第二种方式:问题就是这个第二种方式了,如果是在分片上传的情况下也是多个请求,但是签名就只会向后端拿取一次,签名也只能用一次(后面的请求就失效了)。所以如果是后端生成签名的方式的话,这种请求怎么处理。
您好,可否在上传成功后增加万象优图的location,多谢。
是否有类似七牛的 policy 配置的方案允许对前端上传进行一些限制,包括文件尺寸,权限等。
能给个例子吗
在使用富文本编辑器ueditor进行开发的时候,需要使用sliceUploadFile进行上传。然后发现一个问题,因为ueditor进行上传的页面使用的是iframe的方式,所以如果使用最外层容器即top.COS进行上传的时候,虽然params.Body是属于File,但不属于top.File(即下面的global.File),所以导致抛出params.body error。
var getFileSize = function (api, params, callback) {
var size;
if (util.isBrowser) {
if (typeof params.Body === 'string') {
params.Body = new global.Blob([params.Body]);
}
if (params.Body instanceof global.File || params.Body instanceof global.Blob) {
size = params.Body.size;
} else {
callback({error: 'params body format error, Only allow File|Blob|String.'});
return;
}
}
我只能在每个iframe都引入文件包,并且对于ueditor使用js创建的iframe 也得补上js引用。。。
所以能否换个方式来校验prams.body(比如加上校验是否含有name,size属性之类,或者有一个自定义的校验方式?)。。
Could you provide a cos-js-sdk-v5.d.ts
file? It's useful for TypeScript developer.
上传文件的时候出现authorization error, 请问这是为什么呢
putObject 中的onProgress 函数只能在每次上传完的时候才调用
会不会自动检查文件大小,采用自动分片的方式上传
首先server的auth.php就两个bug,一个是末尾没有加上"?>",然后就是obj2str函数里$list创建数组不成功(至少php5.3是这样)!修改后
function obj2str($obj)
{
$list = array(); ;
$keyList = getObjectKeys($obj);
$len = count($keyList);
for ($i = 0; $i < $len; $i++) {
$key = $keyList[$i];
$val = isset($obj[$key]) ? $obj[$key] : '';
$key = strtolower($key);
$list[$i] = rawurlencode($key) . '=' . rawurlencode($val);
}
return implode('&', $list);
}
base.js?fbd3:1965 Uncaught ReferenceError: cos is not defined
at COS._submitRequest (base.js?fbd3:1965)
at eval (base.js?fbd3:1904)
at COS.getAuthorizationAsync (base.js?fbd3:1840)
at COS.submitRequest (base.js?fbd3:1864)
at COS.putObject (base.js?fbd3:940)
at COS.eval [as putObject] (util.js?c089:349)
at startNextTask (task.js?d062:56)
at eval (task.js?d062:173)
at Object.getFileSize (util.js?c089:458)
at COS.cos._addTask (task.js?d062:166)
cos-js-sdk-v5/server/sts-auth.js
Lines 176 to 186 in 481fd91
Node 6 and above now includes ES6 default parameters
query
and headers
parameters, so I move them the parameters of this function.function getAuthorization (keys, method='GET', pathname='/', query={}, headers={}) {
var SecretId = keys.credentials.tmpSecretId;
var SecretKey = keys.credentials.tmpSecretKey;
pathname.indexOf('/') === -1 && (pathname = '/' + pathname);
}
pathname.indexOf('/') === -1 && (pathname = '/' + pathname);
I've tested the function withouth this line, it seems that this line is useless. I think it should be safe to remove this line.
let
or const
instead of var
Reference linkasync .. await
instead of promise
Reference linkvar File = document.getElementById('file');
File.onchange=function(){
for(var i=0; i<this.files.length;i++){
putObject(this.files[i].size,'pic/'+this.files[i].name,util.createFile(this.files[i]));
}
}
function putObject(key,blob) {
// 调用方法
cos.putObject({
Bucket: config.Bucket, /* 必须 /
Region: config.Region,
Key:key, / 必须 */
Body: blob,
TaskReady: function (tid) {
TaskId = tid;
},
onProgress: function (progressData) {
console.log('普通上传');
console.log(JSON.stringify(progressData.percent));
},
}, function (err, data) {
console.log(err || data);
});
}
///////////////////Here is my test code start///////////////////
const cos = require('cos-js-sdk-v5')
console.log(cos);
///////////////////Here is my test code end///////////////////
but I got a error
in utils .js
isBrowser:!!global.document // This is error code
when i download dist/**.min.js file
run it again
it is good
cos.sliceUploadFile({
Bucket: Bucket,
Region: Region,
Key: file.name,
Body: file,
onHashProgress: function (progressData) {
console.log('校验中', JSON.stringify(progressData));
},
onProgress: function (progressData) {
console.log('上传中', JSON.stringify(progressData));
},
}, function (err, data) {
console.log(err, data);
//这里的data,360和火狐有时能获取到,有时获取不到
});
XML 解析错误:找不到根元素
行 1,列 1: 播放@2x.png:1:1
TypeError: data is undefined
建议能自动判断当body为File类型时,自动指定ContentType为file.type
目前返回的 headers 只包含 cache-control
content-type
stag
last-modified
.
其他的诸如 Content-Disposition
或 x-cos-meta-*
都没在返回值里.
Originally posted by @luoshuisheng in #22 (comment)
文档中提到使用了HTML5的特性,由于没有查看源码不确定使用了哪些,SDK是否支持IE9浏览器?
谢谢.
可以提供 d.ts 文件
感觉没有什么用,但是method: ‘post’, pathname: ‘’ 或pathname: ‘/’.生成的签名才能上传到对象存储cos;其他的就会返回403
// 上传文件
var uploadFile = function (file, callback) {
var Key = 'dir/' + file.name; // 这里指定上传目录和文件名
getAuthorization({Method: 'PUT', Key: Key}, function (err, info) {
xxx
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xxx
xhr.onload = function () {
if (xhr.status === 200 || xhr.status === 206) {
var ETag = xhr.getResponseHeader('etag');
callback(null, {url: url, ETag: ETag});
} else {
callback('文件 ' + Key + ' 上传失败,状态码:' + xhr.status);
}
};
xhr.onerror = function () {
callback('文件 ' + Key + ' 上传失败,请检查是否没配置 CORS 跨域规则');
};
xhr.send(file);
});
};
想请问一下,上传文件如何获取当前上传进度,好做个进度条。查看了一下文档,暂未找到相关api。用搜索的xhr.upload.onprogress,获取的当前event.loaded(已传大小)直接和event.total(文件总大小)一样,就是进度直接100%了,然而看接口状态还是pending,依然还在传送中?
在实现web直传出错。
初步判断是获取密钥的时候文件名是通过URL编码的,但是COS验证的时候不知道用什么编码,官方文档没说,所以报403错误,尝试了几种解决方法都不行。
文件上传成功,但报400错误错误码
MalformedPOSTRequest
The body of your POST request is not well-formed multipart/form-data.
token-up-1257006810.cos.ap-beijing.myqcloud.com
NWI0OWJjMGVfZGIyOTVkNjRfMmI2Y18yZTRjMmU=
OGVmYzZiMmQzYjA2OWNhODk0NTRkMTBiOWVmMDAxODc0OWRkZjk0ZDM1NmI1M2E2MTRlY2MzZDhmNmI5MWI1OTY4OGQ5OWY4YWFhNjAzOTkyNDJhZmQyOTk1YWVmOWFlNmRjYjM3OWQxODI2NjkxYTUyMWFhZDNhMGE4ZmQ3Yjk=
目前亲测可用,指不定啥时候官方又改了,那我再来改。。。
服务端 node 验签
客服端 react + ajax 完成上传
你们要的栗子都在这里,猛戳下面的链接
https://github.com/zwlcoding/cos-js-sdk-v5-demo
环境:iOS10.3 微信6.6.1
调用v5版本的sliceUploadFile方法时报错
Failed to Parse XML Document Reason: 文件提前结束。Line:1 Column: 1
上传成功后返回值中的Location赋值给img并不能回显,在cos控制台中看到图片地址和Location的值不一致,请问该如何获取图片地址让图片回显
在ReactNative中可以直接使用吗?
demo/sts-put.html
文件里,有一行
var ETag = xhr.getResponseHeader('etag');
上传成功后,获取请求头里的etag值?但是,在使用过程中,浏览器一直提示
Refused to get unsafe header "etag"
请问这个该如何处理?
谢谢
还有,后续会出json版吗
你好,我现在遇到一个上传多张图片的问题,微信小程序 本地相册选择了8张图片, 应该调用哪个api 才能上传到腾讯云cos 中 ???
请问想要支持IE8,IE9怎么办?比如如何结合webuploader? 或者有没有其他方式去实现?
如题,求添加对 ts 的支持
"scripts": {
"auth.js": "node server/auth.js",
},
配置错了吧,应为
"scripts": {
"auth.js": "node server/sts-auth.js",
},
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.