腾讯云SDK对象存储
版本：cos-js-sdk-v5
准备环境：
1.JavaScript SDK需浏览器支持基本的HTML5（支持IE10以上浏览器），以便ajax上传文件和计算文件的MD5值。
2.登录对象存储控制台，创建存储桶。获取存储桶名称和地域名称。
3.登录访问管理控制台，获取项目的SecretId 和 SecretKey。（也是项目获取Token的唯一密钥）
4.配置 CORS 规则，AllowHeader 需配成*，ExposeHeaders 需要 ETag、Content-Length 以及其他 js 需要读取的 header 字段
安装：
webpack引入方式：npm install cos-js-sdk-v5 安装模块
获取临时密钥：
此处的密钥一般是后端返回代理的临时密钥，返回值主要为：TmpSecretId，TmpSecretKey，SecurityToken
初始化：
<script>
import COS from '/cos-js-sdk-v5'
import axios from 'axios'
exprot defult{
//初始化cos上传、、、、此处生命周期可以写高些
mounted(){
let _this = this; //改变指向，不然下面的methods内的cos.xxx方法找不到
_this.cos = new COS({
//本身getAuthorization并不是必选参数，可以直接写SecretId 和 SecretKey，直接进行上传，但是考虑到这个唯一密钥不能放在前端，于是才有了下面的必选参数，通过请求后端接口返回的代理密钥
//SecretId:'xxxxx',
//SecretKey:'xxxxx',
//必选参数
getAuthorization:(options,callback)=>{
_this.axios.post('/后端密钥返回接口').then(res=>{
//判断后端返回的值是否存在
var credentials = res.data && res.data.credentials;
if (!res || !credentials) return console.error('credentials invalid');
callback({
TmpSecretId: credentials.tmpSecretId, //必须参数
TmpSecretKey: credentials.tmpSecretKey, //必须参数
XCosSecurityToken: credentials.sessionToken, //必须参数
// 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
StartTime: res.data.startTime, // 时间戳，单位秒，如：1580000000
ExpiredTime: res.data.expiredTime, // 时间戳，单位秒，如：1580000900
// ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
});
})
}
})
}
}
</script>
上传:
这里使用原生方法介绍，也可以使用element-ui Upload的自定义上传方法（http-request）但是会覆盖部分定义好方法的钩子方法
<input
type="file"
id="upload_file"
ref = "upFile"
@click="getUp"
/>
<button @click = "stopUpload">取消上传</button>
methods:{
//上传文件
getUp(){
var file = this.$refs.upFile.files[0];
if(!file) return;
let _this = this; //这里也需要改变指向，下面上传回调里面this会找不到
//简单上传 适用于小文件上传，大文件建议使用分块上传
_this.cos.putObject({
Bucket: 'examplebucket-1250000000', /* 必须 */
Region: 'COS_REGION', /* 存储桶所在地域，必须字段 */
Key: file.name, /* 必须 */ //这里一般用于做拼接字符上传文件名称
StorageClass: 'STANDARD',
Body: file, // 上传文件对象
onTaskReady:(progressData)=>{},//上传任务创建时的回调函数，返回一个 taskId，唯一标识上传任务，可用于上传任务的取消（cancelTask），停止（pauseTask）和重新开始（restartTask）
onProgress:(progressData)=>{},//文件上传中返回的事件，loaded: 文件大小, total: 已上传大小, speed: 上传速度, percent: 上传进度
onHashprogress:(progressData)=>{},//文件上传中返回的事件
},function(err,data){
console.log(err || data); // 上传成功返回给你的
_this.ruleForm.ios_path = data.Key
})
//分片上传，适用于大文件的上传。一般根据情况选择使用
_this.cos.sliceUploadFile({
Bucket: 'examplebucket-1250000000', /* 必须 */
Region: 'COS_REGION', /* 存储桶所在地域，必须字段 */
Key: file.name, /* 必须 */ //这里一般用于做拼接字符上传文件名称
StorageClass: 'STANDARD',
Body: file, // 上传文件对象
onTaskReady:(progressData)=>{
taskId = progressData,
},//上传任务创建时的回调函数，返回一个 taskId，唯一标识上传任务，可用于上传任务的取消（cancelTask），停止（pauseTask）和重新开始（restartTask）
onProgress:(progressData)=>{},//文件上传中返回的事件，loaded: 文件大小, total: 已上传大小, speed: 上传速度, percent: 上传进度
onHashprogress:(progressData)=>{},//文件上传中返回的事件
},function(err,data){
console.log(err || data); // 上传成功返回给你的
_this.ruleForm.ios_path = data.Key
})
},
//取消上传文件
stopUpload(){
this.cos.cancelTask(this.taskId); //这里的taskId为上传文件时返回的值，建议在同一实例下进行操作
},
}
