前端使用js控制腾讯云cos存储对象，优化静态文件存储读取的功能，获取预签名，上传下载，腾讯云大文件分块上传失败，报错跨域失败

最新推荐文章于 2023-08-31 16:08:05 发布
最新推荐文章于 2023-08-31 16:08:05 发布
阅读量3.2k 收藏 8
点赞数 1
分类专栏： javascript 文章标签： javascript 腾讯云
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43305958/article/details/108360978
版权

前端使用js控制腾讯云cos存储对象，优化静态文件存储读取的功能，获取预签名，上传下载，报错跨域失败

一、对象存储是什么？

对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。COS 提供网页端管理界面、多种主流开发语言的 SDK、API 以及命令行和图形化工具，并且兼容 S3 的 API 接口，方便用户直接使用社区工具和插件。

二、使用步骤

1.引入库

代码如下（示例）：

npm i cos-js-sdk-v5 --save

2.引入作为模块

代码如下（示例）：

var COS = require('cos-js-sdk-v5');

3.前端使用固定密钥计算签名，该格式适用于前端调试

代码如下（示例）：

var cos = new COS({
    SecretId: 'COS_SECRETID',
    SecretKey: 'COS_SECRETKEY',
});

4.下载对象

代码如下（示例）：

cos.getObject({
    Bucket: 'examplebucket-1250000000', /* 必须 */
    Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
    Key: 'exampleobject',              /* 必须 */
}, function(err, data) {
    console.log(err || data.Body);
});

5.上传对象

代码如下（示例）：

cos.putObject({
    Bucket: 'examplebucket-1250000000', /* 必须 */
    Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
    Key: 'exampleobject',              /* 必须 */
    StorageClass: 'STANDARD',
    Body: fileObject, // 上传文件对象
    onProgress: function(progressData) {
        console.log(JSON.stringify(progressData));
    }
}, function(err, data) {
    console.log(err || data);
});

6.调用cos上传下载跨域

将腾讯云的桶基本配置修改
添加跨域访问CORS规则
在这里插入图片描述

7.获取预签名，获取对象下载的鉴权凭证

COS XML API 的请求里，私有资源操作都需要鉴权凭证 Authorization，用于判断当前请求是否合法。

鉴权凭证使用方式有两种：

放在 header 参数里使用，字段名：authorization。
放在 url 参数里使用，字段名：sign。
COS.getAuthorization 方法用于计算鉴权凭证（Authorization），用以验证请求合法性的签名信息。

代码如下（示例）：

Sign: false, //不需要预签名的时候

var cos = new COS({
getAuthorization: function(options, callback) { 
    // var authorization = COS.getAuthorization({
    //     // SecretId: 'AKIDMjxwd4S9pFQKzNfVEjyxg9LQE8nAnCpC',
    //     // SecretKey: 'mHqAHNFrDQ2Vki028yf5FD0XZeUAbnjT',
    //     SecretId: tmpSecretId,
    //     SecretKey: tmpSecretKey,
    //     Token: sessionToken,
    //            Method: options.Method,
    //            Key: options.Key,
    //            Query: options.Query,
    //            Headers: options.Headers,
    //            Expires: 60,
    // });
    // callback(authorization);
    callback({
        TmpSecretId: tmpSecretId,
        TmpSecretKey: tmpSecretKey,
        XCosSecurityToken: sessionToken,
        // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
        StartTime: result.startTime, // 时间戳，单位秒，如：1580000000
        ExpiredTime: result.expiredTime, // 时间戳，单位秒，如：1580000900
    });
}
});

8.获取预签名，上传文件，真正意义上的减轻服务器压力

代码如下（示例）：

var cos = new COS({
getAuthorization: function(options, callback) { 
    // var authorization = COS.getAuthorization({
    //     // SecretId: 'AKIDMjxwd4S9pFQKzNfVEjyxg9LQE8nAnCpC',
    //     // SecretKey: 'mHqAHNFrDQ2Vki028yf5FD0XZeUAbnjT',
    //     SecretId: tmpSecretId,
    //     SecretKey: tmpSecretKey,
    //     Token: sessionToken,
    //            Method: options.Method,
    //            Key: options.Key,
    //            Query: options.Query,
    //            Headers: options.Headers,
    //            Expires: 60,
    // });
    // callback(authorization);
    callback({
        TmpSecretId: tmpSecretId,
        TmpSecretKey: tmpSecretKey,
        XCosSecurityToken: sessionToken,
        // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
        StartTime: result.startTime, // 时间戳，单位秒，如：1580000000
        ExpiredTime: result.expiredTime, // 时间戳，单位秒，如：1580000900
    });
}
});

9.操作存储对象的时候，http请求报错403

http请求报错详解链接: https://blog.csdn.net/qq_43305958/article/details/108422927.

403报错是权限不够，改桶和文件夹的权限，改为以下的公共读私有写权限
在这里插入图片描述

10.大文件分块上传失败

使用cos的uploadFiles方法可以上传多个文件，同时在上传大文件的时候会自动分块上传，每个文件都有固定编号，在上传成功后在cos桶中合并
官方建议
分块上传最多支持将较大的对象切分为10000个分块，切分的分块大小范围一般为1MB - 5GB，最后一个分块可以小于1MB
简单上传的方式只支持最大5GB的文件上传，而通过分块上传的方式可上传大于5GB的文件。
个人建议
没有5G以上的文件上传吧

cos.uploadFiles({
files: [{
    Bucket: _that.bucketName /* 必须 */ ,
    Region: _that.Region /* 存储桶所在地域，必须字段 */ ,
    Key: allUrl /* 必须 */ ,
    Body: fileObject,
    Sign: true
}],
// Bucket: _that.bucketName /* 必须 */ ,
// Region: _that.Region /* 存储桶所在地域，必须字段 */ ,
// Key: allUrl /* 必须 */ ,
// Body: fileObject,
onProgress: function(info) {
    var percent = parseInt(info.percent * 10000) / 100;
    var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
    console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
},
onFileFinish: function(err, data, options) {
    console.log(options.Key + '上传' + (err ? '失败' : '完成'));
},
}

这是一个80M的文件，前面几次的分块上传正常，突然失败
在这里插入图片描述
在这里插入图片描述
改用cos的putObject方法一次性上传

cos.putObject({
Bucket: _that.bucketName /* 必须 */ ,
Region: _that.Region /* 存储桶所在地域，必须字段 */ ,
Key: allUrl /* 必须 */ ,
Body: fileObject,
onProgress: function(info) {
    var percent = parseInt(info.percent * 10000) / 100;
    var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
    console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
},
onFileFinish: function(err, data, options) {
    console.log(options.Key + '上传' + (err ? '失败' : '完成'));
},
}

只有一次请求，成功
在这里插入图片描述

在这里插入图片描述

11.使用getObjectUrl后用URL下载文件403

已经使用了预签名，通过了防盗链，获取到了url，如果这个时候是没有防盗链的文件就可以通过url下载，当遇到加上防盗链的文件，就无法用url下载文件，
改用getObject方法，通过防盗链直接下载文件，返回的文件是文件，需要转成blob文件流格式，再将blob转成公用URL格式，创建一个a标签，将url设为a标签src属性，点击下载

cos.getObject({
// Bucket: _that.bucketName /* 必须 */ ,
Bucket: _that.bucketName /* 必须 */ ,
Region: _that.Region /* 存储桶所在地域，必须字段 */ ,
Key: url /* 必须 */ ,
// Sign: false,
// sign: Authorization,
},
function(err, data) {
var blob = new Blob([data.Body]);
let blobUrl = URL.createObjectURL(blob)
if (err) {
    _that.$message.error(err)
    return
}
// 保存到本地并自动点击
function saveAs(data, name) {
    const urlObject = window.URL || window.webkitURL || window;
    const export_blob = new Blob([data]);
    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    save_link.click();
    let formData3 = new FormData()
    formData3.append('taskid', id);
    postAction(_that.downloadOver, formData3)
}
// 下载含有url的文件
function downloadUrlFile(url, fileName) {
    const url2 = url.replace(/\\/g, '/');
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url2, true);
    xhr.responseType = 'blob';
    //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
    // 为了避免大文件影响用户体验，建议加loading
    xhr.onload = () => {
        if (xhr.status === 200) {
            // 获取文件blob数据并保存
            saveAs(xhr.response, fileName);
        }
    };
    xhr.send();
}
downloadUrlFile(blobUrl, name)
}

重点

一个成功的操作cos存储对象上传、多个文件上传、下载 的案例

//导入导出界面的下载调用此方法
createCos(code, url, name, id) {
    var COS = require('cos-js-sdk-v5')
    const formData = new FormData();
    formData.append('modelName', code);
    let _that = this
    if (code === 1) {
        postAction(this.getCosUrl, formData).then((res) => {
            if (res.success) {
                let result = JSON.parse(res.message)
                var cos = new COS({
                        TmpSecretId: result.tmpSecretId,
                        TmpSecretKey: result.tmpSecretKey,
                    })
                    // console.log(_that.bucketName)
                cos.getObjectUrl({
                        // Bucket: _that.bucketName /* 必须 */ ,
                        Bucket: _that.bucketName /* 必须 */ ,
                        Region: _that.Region /* 存储桶所在地域，必须字段 */ ,
                        Key: url /* 必须 */ ,
                        Sign: false,
                        // sign: Authorization,
                    },
                    function(err, data) {
                        if (err) {
                            _that.$message.error(err)
                            return
                        }
                        // 保存到本地并自动点击
                        function saveAs(data, name) {
                            const urlObject = window.URL || window.webkitURL || window;
                            const export_blob = new Blob([data]);
                            const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                            save_link.href = urlObject.createObjectURL(export_blob);
                            save_link.download = name;
                            save_link.click();
                            let formData3 = new FormData()
                            formData3.append('taskid', id);
                            postAction(_that.downloadOver, formData3)
                        }
                        // 下载含有url的文件
                        function downloadUrlFile(url, fileName) {
                            const url2 = url.replace(/\\/g, '/');
                            const xhr = new XMLHttpRequest();
                            xhr.open('GET', url2, true);
                            xhr.responseType = 'blob';
                            //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
                            // 为了避免大文件影响用户体验，建议加loading
                            xhr.onload = () => {
                                if (xhr.status === 200) {
                                    // 获取文件blob数据并保存
                                    saveAs(xhr.response, fileName);
                                }
                            };
                            xhr.send();
                        }
                        downloadUrlFile(data.Url, name)
                    }
                )
            } else {
                this.$message.warning(res.message)
            }
        }, (err) => {
            this.$message.warning(err)
        })
    }
},
//导入文件调用此方法
uploadCos(fileObject, url, code, userid, modal = '') {
    var COS = require('cos-js-sdk-v5'),
        _that = this
    const formData = new FormData();
    if (code === 1) {
        formData.append('modelName', 1);
        let allUrl = this.uploadUrl + userid + '/' + url
        postAction(this.getCosUrl, formData).then((res) => {
            if (res.success) {
                let result = JSON.parse(res.message)
                let tmpSecretId = result.credentials.tmpSecretId,
                    tmpSecretKey = result.credentials.tmpSecretKey,
                    sessionToken = result.credentials.sessionToken
                var cos = new COS({
                    getAuthorization: function(options, callback) { 
                        callback({
                            TmpSecretId: tmpSecretId,
                            TmpSecretKey: tmpSecretKey,
                            XCosSecurityToken: sessionToken,
                            // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                            StartTime: result.startTime, // 时间戳，单位秒，如：1580000000
                            ExpiredTime: result.expiredTime, // 时间戳，单位秒，如：1580000900
                        });
                    }
                });
                cos.putObject({
                    Bucket: _that.bucketName /* 必须 */ ,
                    Region: _that.Region /* 存储桶所在地域，必须字段 */ ,
                    Key: allUrl /* 必须 */ ,
                    Body: fileObject,
                    onProgress: function(info) {
                        var percent = parseInt(info.percent * 10000) / 100;
                        var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
                        console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
                    },
                    onFileFinish: function(err, data, options) {
                        console.log(options.Key + '上传' + (err ? '失败' : '完成'));
                    },
                }, function(err, data) {
                    let status = err ? 500 : 200
                    if (status == 200) {
                        const formData2 = new FormData();
                        formData2.append('model', modal);
                        formData2.append('key', url);
                        postAction(_that.cosTask, formData2).then(res => {
                            _that.uploadResult = res
                        }, err => {
                            let res = Object.assign({}, {
                                message: "执行失败",
                                success: false
                            })
                            _that.uploadResult = res
                        })
                    } else {
                        let res = Object.assign({}, {
                            message: "执行失败",
                            success: false
                        })
                        _that.uploadResult = res
                    }
                });
            } else {
                this.$message.warning(res.message)
            }
        }, (err) => {
            let res = Object.assign({}, {
                message: "执行失败",
                success: false
            })
            _that.uploadResult = res
            this.$message.warning(err)
        })

    } else if (code === 0) {
        formData.append('modelName', 2);
        postAction(this.getCosUrl, formData).then((res) => {
            if (res.success) {
                let result = JSON.parse(res.message)
                let tmpSecretId = result.credentials.tmpSecretId,
                    tmpSecretKey = result.credentials.tmpSecretKey,
                    sessionToken = result.credentials.sessionToken
                var cos = new COS({
                    getAuthorization: function(options, callback) { 
                        // var authorization = COS.getAuthorization({
                        //     // SecretId: 'AKIDMjxwd4S9pFQKzNfVEjyxg9LQE8nAnCpC',
                        //     // SecretKey: 'mHqAHNFrDQ2Vki028yf5FD0XZeUAbnjT',
                        //     SecretId: tmpSecretId,
                        //     SecretKey: tmpSecretKey,
                        //     Token: sessionToken,
                        //            Method: options.Method,
                        //            Key: options.Key,
                        //            Query: options.Query,
                        //            Headers: options.Headers,
                        //            Expires: 60,
                        // });
                        // callback(authorization);
                        callback({
                            TmpSecretId: tmpSecretId,
                            TmpSecretKey: tmpSecretKey,
                            XCosSecurityToken: sessionToken,
                            // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                            StartTime: result.startTime, // 时间戳，单位秒，如：1580000000
                            ExpiredTime: result.expiredTime, // 时间戳，单位秒，如：1580000900
                        });
                    }
                });
                cos.uploadFiles({
                    files: [{
                        Bucket: _that.bucketName /* 必须 */ ,
                        Region: _that.Region /* 存储桶所在地域，必须字段 */ ,
                        Key: url /* 必须 */ ,
                        Body: fileObject,
                        Sign: true
                    }],
                    SliceSize: 1024 * 1024,
                    onProgress: function(info) {
                        var percent = parseInt(info.percent * 10000) / 100;
                        var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
                        console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
                    },
                    onFileFinish: function(err, data, options) {
                        console.log(options.Key + '上传' + (err ? '失败' : '完成'));
                    },
                }, function(err, data) {
                    let status = err ? 500 : 200
                    if (status == 200) {
                        let res = Object.assign({}, {
                            message: "执行成功",
                            success: true
                        })
                        _that.uploadResult = res
                    } else {
                        let res = Object.assign({}, {
                            message: "执行失败",
                            success: false
                        })
                        _that.uploadResult = res
                    }
                });
            } else {
                this.$message.warning(res.message)
            }
        }, (err) => {
            let res = Object.assign({}, {
                message: "执行失败",
                success: false
            })
            _that.uploadResult = res
            this.$message.warning(err)
        })

    }
},
// ? 质量控制上传多张图片
uploadMultipleImages(imageFiles, urls, details) {
    const formData = new FormData();
    formData.append('modelName', 2);
    const COS = require('cos-js-sdk-v5')
    const _that = this
        // const formData = new FormData();
        // formData.append('modelName', code);
    let files = []
    imageFiles.forEach((item, index) => {
            // let timestamp = new Date().valueOf()
            files.push({
                Bucket: this.bucketName /* 必须 */ ,
                Region: this.Region /* 存储桶所在地域，必须字段 */ ,
                Key: `quality/${details.model}/${details.code}/${urls[urls.length-imageFiles.length+index]}` /* 必须 */ ,
                Body: item,
                Sign: true
            })
        })
        // ? 该部分SecretId暂时固定
    postAction(this.getCosUrl, formData).then((res) => {
        if (res.success) {
            let result = JSON.parse(res.message)
            let tmpSecretId = result.credentials.tmpSecretId,
                tmpSecretKey = result.credentials.tmpSecretKey,
                sessionToken = result.credentials.sessionToken
            var cos = new COS({
                getAuthorization: function(options, callback) { 
                    // var authorization = COS.getAuthorization({
                    //     // SecretId: 'AKIDMjxwd4S9pFQKzNfVEjyxg9LQE8nAnCpC',
                    //     // SecretKey: 'mHqAHNFrDQ2Vki028yf5FD0XZeUAbnjT',
                    //     SecretId: tmpSecretId,
                    //     SecretKey: tmpSecretKey,
                    //     Token: sessionToken,
                    //            Method: options.Method,
                    //            Key: options.Key,
                    //            Query: options.Query,
                    //            Headers: options.Headers,
                    //            Expires: 60,
                    // });
                    // callback(authorization);
                    callback({
                        TmpSecretId: tmpSecretId,
                        TmpSecretKey: tmpSecretKey,
                        XCosSecurityToken: sessionToken,
                        // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                        StartTime: result.startTime, // 时间戳，单位秒，如：1580000000
                        ExpiredTime: result.expiredTime, // 时间戳，单位秒，如：1580000900
                    });
                }
            });
            cos.uploadFiles({
                files,
                SliceSize: 1024 * 1024,
                onProgress: info => {
                    var percent = parseInt(info.percent * 10000) / 100;
                    var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
                    console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
                },
                onFileFinish: (err, data, options) => {
                    console.log(options.Key + '上传' + (err ? '失败' : '完成'));
                },
            }, (err, data) => {
                let status = err ? 500 : 200
                if (status == 200) {
                    const formData2 = new FormData()
                    formData2.append('code', details.code)
                    formData2.append('name', details.name)
                    formData2.append('picName', urls)
                    postAction(this.upload, formData2).then(res => {
                        if (res.success) {
                            this.$message.success(res.message)
                            this.$emit("display");
                        } else {
                            this.$message.error(res.message)
                        }
                        this.visible = false
                    })
                } else {
                    this.$message.warning('操作失败')
                }
            });
        } else {
            this.$message.warning(res.message)
        }
    }, (err) => {
        let res = Object.assign({}, {
            message: "执行失败",
            success: false
        })
        _that.uploadResult = res
        this.$message.warning(err)
    })
}

将url地址的文件下载
链接: https://blog.csdn.net/qq_43305958/article/details/108366645.

总结

、
good afternoon

大吕十六 不见长安
关注
专栏目录
对象存储OSS
AI天才研究院
08-28 651
作者：禅与计算机程序设计艺术 1.简介 概念 对象存储（Object Storage）指的是利用云端服务器存储大量非结构化或结构复杂的数据文件，并提供在线访问数据的能力。对象存储是分布式、高可用的网络数据存储服务，主要用于存放各种类型的文件，包括图片、视频、音频、文档等
COS、OBS、OSS对比
lukabruce的博客
03-04 2711
对比维度 类别 具体 腾讯云COS 华为云OBS 阿里云OSS 功 能 ...
vue 上传图片到腾讯云对象存储
且听风吟的博客
02-18 4864
需求：上传图片到腾讯云对象存储，拿到图片地址，以供查看图片使用。 大概流程： 腾讯云对象存储（Cloud Object Storage，COS）是腾讯云提供的一种存储海量文件的分布式存储服务，用户可通过网络随时存储和查看数据。 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。 COS 通过控制台、API、SDK 和工具等多样化方式简单、快速地接入，实现了海量数据存储和管理。通过 COS 可以进行任意格式文件的上传、下载和管理。 官网：https://cloud.tencent.c
前端js 腾讯云 ，V3 签名自动生成，直接调用腾讯云api
SAXX2的博客
07-06 582
前端js 腾讯云 ，V3 签名自动生成，直接调用腾讯云api前端js 腾讯云 ，V3 签名自动生成，直接调用腾讯云api
腾讯云-对象存储服务（COS）的使用总结-JavaScript篇
最新发布
流子的专栏
08-31 1647
本文主要介绍了对象存储快速入门，列举了客户端在拿到临时密钥后，如何进行后续的COS API操作，本文暂时只举例了存储的操作，至于其他的COS接口调用，调用方法类似，我们不再赘述。
使用腾讯云COS与CDN提示跨域的解决方案
weixin_33989780的博客
07-28 5382
我的博客是直接用Coding Pages部署的，服务器在香港，时不时的就会抽风，而且Pages用的人越来越多以后Coding的带宽也有点捉襟见肘了，于是打算把静态资源全部搬到腾讯云提供的COS上，同时启用它的CDN来加速，但是调试的过程中发现CSS加载字体跨域了。 于是到COS控制台里设置一下CROS 首先点击编辑 然后把设置打开并且新建一条规则...
cos-js-sdk-v5:腾讯云 COS JS SDK（XML API）
07-23
cos-js-sdk-v5 腾讯云 COS JS SDK（） Get started 一、前期准备 首先，JS SDK 需要浏览器支持基本的 HTML5 特性，以便支持 ajax 上传文件和计算文件 md5 值。 到 创建存储桶，得到 Bucket（存储桶名称） 和 到 获取您的项目 SecretId 和 SecretKey 配置 CORS 规则，配置例子如下图： 二、计算签名 由于签名计算放在前端会暴露 SecretId 和 SecretKey，我们把签名计算过程放在后端实现，前端通过 ajax 向后端获取签名结果，正式部署时请再后端加一层自己网站本身的权限检验。 这里提供 ，其他语言，请参照对应的 三、上传例子 创建 test.html，填入下面的代码，修改里面的 Bucket 和 Region。 部署好后端的签名服务，并修改 getAuthorization 里的签名服务地址 把
腾讯云对象存储空间分片、断点续传功能的封装与使用
酱橙的博客
12-09 2322
以下参考自 腾讯云文档 Author： 酱橙 腾讯云对象存储空间小记 API 准备工作 1. 开通服务 前往【对象存储】控制台，依据提示开通对象存储服务 2. 创建存储桶 3. 获取访问密钥 进入【访问管理】控制台 进入【API密钥管理】页 获取APPID、SecretID、SecretKey 此处记录一下自己的： Bucket：xiang-pi-chi-66666666 APPID: 125????957064 SecretId : AKIDWjkWJUNslPPy??
上传下载cos.rar
04-07
【标题解析】：“上传下载cos.rar”这个标题表明我们关注的是与腾讯云对象存储服务（Cloud Object Storage，简称COS）相关的上传和下载操作。rar是一种常见的文件压缩格式，这里用rar打包的文件可能包含了与COS服务...
腾讯云对象存储COS的使用教程，node获取签名，js上传
qq_40146880的博客
10-31 4172
腾讯云对象存储的使用 这里忽略创建存储桶之类的操作。 说明：本示例使用nuxt服务端渲染 + koa框架 万事第一步：npm install ~~~ npm i qcloud-cos-sts --save node sdk 注意：qcloud-cos-sts 只能在服务端中使用。 第二步：设置授权策略 // 示例 创建一个oss文件夹在controllers下面,项目结构自行更改。 // ../c...
前端图片存储方案（COS）
行胜于言，行动胜于空想
05-25 851
在前端开发中，图片的存储问题是一个比较常见的需求。本文将介绍如何使用腾讯云对象存储服务（COS）来存储图片。
腾讯云平台 cos 存储的图片直接在线浏览(已解决)
热门推荐
junling_xhu的博客
08-24 1万+
解决办法：开启静态网站 进入腾讯与平台对象存储  选择基础配置   找到最下端的静态网站 点击编辑 开启静态网站
对象存储 COS 帮您轻松搞定跨域访问需求
云存储小天使的博客
01-27 3865
丨背景早期为了避免 CSRF（跨站请求伪造） 攻击，浏览器引入了 “同源策略” 机制。如果两个 URL 的协议，主机名（域名/IP），端口号一致，则视为这两个 URL “同源”，属于同一...
纯前端实现腾讯cos文件上传功能
weixin_33743880的博客
05-14 2472
前言 在前端开发中文件上传是经常会遇到的，并且多数情况会使用第三方平台来存储文件，腾讯云cos是我们常用的。本篇文章就是带我从前端的角度实现腾讯云COS存储。本文参考了腾讯云COS开发文档 JavaScript SDK 步骤 安装腾讯云COS上传所需的sdk 下载cos-js-sdk-v5.min.js并引入index.html 监听文件上传组件 //监听文件变化 document.ge...
使用COS上传文件(转载)
frankchenyj的专栏
10-06 1386
使用COS上传文件很早就想写一个关于JSP文件上传的文章了，一直没时间。正好今天刚开学，就简单的写一下。对于初学者来说用JSP上传文件好像很难，网上关于这方面的资料也不全。不过你看了下面的文章之后会觉得这太简单了。我这里用的是COS上传组件，它是OReilly公司开发的，下载地址http://www.servlets.com/cos/index.html为了方便，这里用的开发工具是:eclips
JS上传图片文件到腾讯云对象存储COS
一往无前的博客
08-20 2877
上传图片到腾讯云主要有两个步骤： 1、鉴权 2、开始上传 需要引入两个JS文件：cos-js-sdk-v5.min.js和jquery-2.1.4.min.js，这两个文件的链接我已放在后面。 鉴权可以直接使用SecretId和SecretKey生成cos对象，但把SecretId和SecretKey暴露在前端页面这样不太安全，我们采用从服务端申请临时秘钥的方式生成cos对象。 上传成功后的图片链接也可以通过域名+自定义key拼接生成，如下。 前端页面全部代码如下： <!DOCTYPE html&gt
阿里云ACP认证OSS专项练习（2）
Parhoia的博客
08-27 6094
64、判断 阿里云对象存储OSS是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。 OSS支持管理控制台和API（包括SDK）两种文件上传和下载方式。A A .对 B .错 65、单选 阿里云对象存储OSS里存储的文件可以进行分享和下载，当文件所在的Bucket的读写权限为“私有”时，OSS分享链接采用的安全机制是____C______。 A .在管理控制台中获取文件访问URL时设置分享链...
上传文件到腾讯云COS
T_T55555的博客
11-13 757
import COS from 'cos-js-sdk-v5' // 通过npm安装 import md5 from 'blueimp-md5' // 通过npm安装 class Auth { // 认证信息 constructor (bucket, region, TmpSecretId, TmpSecretKey, XCosSecurityToken, ExpiredTime) { ...
COS组件上传附件的代码样例
chenshuo1234567的专栏
03-13 906
上传类的代码：/** *//**     * 使用cos组件上传   * 速度很快，最后选用该组件   * @param request HttpServletRequest     * @return String     * @throws Exception     */    public String uploadfiles(HttpServletRequest request)
前端 上传文件/照片/视频 到cos(腾讯云) 代码实现
weixin_55042716的博客
12-17 3271
前端 上传文件/照片/视频 到cos(腾讯云)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值