javascript上传文件到腾讯云COS

- 日理万妓 2022-05-18 02:59 429阅读 0赞

**JavaScript上传是通过http协议直接传输数据到腾讯云对象存储里面**

1.首先引入腾讯云封装好的cos-js-sdk-v5.js文件

下载链接：[https://pan.baidu.com/s/1wUmKY797cYsBxfAs9KQACA ][https_pan.baidu.com_s_1wUmKY797cYsBxfAs9KQACA]密码：sj1c

2.以下代码可以完成上传文件操作

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>个人收藏夹</title>
        <script type="text/javascript" src="js/cos-js-sdk-v5.js"></script>
        <script type="text/javascript">
    		//获取当前时间的字符串
            function GetTimeString() {
                var date = new Date();
                var yy = date.getFullYear().toString();
                var mm = (date.getMonth() + 1).toString();
                var dd = date.getDate().toString();
                var hh = date.getHours().toString();
                var nn = date.getMinutes().toString();
                var ss = date.getSeconds().toString();
                var mi = date.getMilliseconds().toString();
    
                var ret = yy + mm + dd + hh + nn + ss + mi;
                return ret;
            }
            //实例化COS对象
            var cos = new COS({
                SecretId: '', //密钥id
                SecretKey: ''//密钥的key
            });
            //点击上传按钮上传文件到腾讯云
            function uploadCos() {
                var file = document.getElementById('videoFile').files[0];
                cos.putObject({
                    Bucket: 'bucket-12345678', // 桶名-APPID  必须
                    Region: 'ap-beijing', //区域 必须
                    Key: GetTimeString() + '.mp4', //文件名必须 
                    StorageClass: 'STANDARD',
                    Body: file, // 上传文件对象
                    onProgress: function (progressData) {
                        console.log(JSON.stringify(progressData));//上传成功的返回值
                    }
                }, function (err, data) {
                    console.log(err || data);//上传失败的返回值
                });
    
            }
        </script>
    </head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    请选择文件:<input type="file" id="videoFile" value=""/>
    <input type="button" value="上传" onclick="uploadCos()"/>
    </body>
    </html>

3.如果还需要别的操作请参考腾讯云SDK文档，[https://cloud.tencent.com/document/product/436/12260][https_cloud.tencent.com_document_product_436_12260]

[https_pan.baidu.com_s_1wUmKY797cYsBxfAs9KQACA]: https://pan.baidu.com/s/1wUmKY797cYsBxfAs9KQACA
[https_cloud.tencent.com_document_product_436_12260]: https://cloud.tencent.com/document/product/436/12260