内容详情 您现在的位置是: 首页> Js

web前端使用腾讯云对象存储 COS

发布时间:2021-01-20 18:29 已围观:2580

摘要web前端使用腾讯云对象存储 COS,对象存储文档JavaScript SDK 的使用记录

web前端使用腾讯云对象存储 COS,对象存储 JavaScript SDK文档地址:

https://cloud.tencent.com/document/product/436/11459

2.jpg

html页面内容:

<div class="form-group vid_aud">
       <label class="col-sm-2 control-label" >视频</label>
       <div class="col-sm-10">
           <input type="file"  id="files_copy" name="file" accept="video/mp4" class="btn btn-default" />
           <input type="button" value="上传" class="btn btn-primary btn-block"  onclick="begin()">
           <input type="hidden" id="video_src" >
       </div>
   </div>


<script>
   //定义全局变量
   var Bucket = '';// 桶名-APPID
   var SecretId = "";//密钥id
   var SecretKey = ""; //密钥的key
   var Region = '';//区域

   //获取配置参数
   $.ajax({
       type: 'post',
       url: "{php echo $this->createWebUrl('notice',array('op'=>'txcos_set'))}",
       data: {},
       dataType: "json",
       success: function (res) {
           Bucket = res.bucket;
           SecretId = res.secretId;
           SecretKey = res.secretKey;
           Region = res.region;
      }
  });

   function begin() {
       var file = document.getElementById('files_copy').files[0];
       //console.log(file);
       var fileType = file.type;
       if (fileType != 'video/mp4') {
           alert('文件格式有误');
           return false;
      }
       var fileSize = file.size;
       //console.log("fileType:"+fileType+"fileSize:"+fileSize);
       var reader = new FileReader(); //读取文件对象
       reader.readAsDataURL(file);
       reader.onload = function (event) {
           uploadCos(file)
      };
  }

   //上传
   function uploadCos(file) {
       var cos = new COS({
           SecretId: SecretId,
           SecretKey: SecretKey
      });
       var ret = GetTimeString();
       cos.putObject({
           Bucket: Bucket,
           Region: Region,
           Key: ret + '.mp4', //文件名
           StorageClass: 'STANDARD',
           Body: file, // 上传文件对象
           onProgress: function (progressData) {
               console.log('上传过程的返回值',JSON.stringify(progressData)); //上传过程的返回值
          }
      }, function (err, data) {
           console.log('上传结果的返回值',err || data); //上传结果的返回值
           if (data.statusCode == 200) {
               $("#video_src").val('https://' + data.Location);//成功,获取视频链接,返回到页面上
               alert('上传成功');
          } else {
               alert('上传失败');
          }
      });
  }

   // 文件重命名
   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;
  }
</script>



赞一个 (14)