vue+element+cos-js-sdk-v5上传文件到cos

1、 引入cos-js-sdk-v5

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

直接上代码

<template>

<div>

<el-upload v-if="!disabled" class="upload-demo isDel" ref="upload" :action="'#'"
      accept=".rar, .zip, .doc, .docx, .pdf, .png, .jpg, .jpeg" :on-preview="handlePreview" :file-list="fileList" :on-change="onChange"
       :on-success="handleSuccess" :disabled="disabled" :show-file-list="false" :http-request="uploadToCos">
      <el-button v-if="!disabled" slot="trigger" type="primary">选取文件</el-button>
      <div v-if="!disabled" slot="tip" class="el-upload__tip">
        支持扩展名：.rar .zip .doc .docx .pdf .png .jpg .jpeg
      </div>
    </el-upload>

<el-row class="jindutiao" v-if="isJindu">
      <el-col>
        <el-progress :percentage="videoPercent">
        </el-progress>
      </el-col>
      <el-col>
        <i class="el-icon-error" @click="zhongzhi( fileList[0])"  v-if="isZuzhi"></i>
      </el-col>
    </el-row>

</div>
</template>

<script>
  import COS from 'cos-js-sdk-v5';
  const config = {
    SecretId: '',//cos储存桶的SecretId
    SecretKey: '',//cos储存桶的SecretKey
    Bucket: '',//存储桶
    Region: 'ap-shanghai',//存储桶所在地域
  };

  const cos = new COS({
    SecretId: config.SecretId,
    SecretKey: config.SecretKey,
  });

    export default {
    name: "ApplyIndexModule",
    data() {

     return {

        fileList:[],

        file:"",

        isJindu:false,

        videoPercent:0,

        taskId:'',

        

     }

     methods: {

onChange(file, fileList) {
        this.file = file;
        this.fileList = fileList;

},

     uploadToCos(file) {
        console.log(file)

        const fileInfo = file.file;

        const isLtM = fileInfo.size / 1024 / 1024 < 1024;

        if (!isLtM) {
          return that.$message.error("上传文件大小不能超过 1GB!");
        }
        if (that.fileList.length != 1) {
         
          // that.fileList.slice(0, 1);
          return that.$message.error("只能上传一个文件，请删除原文件");
        }

        }

        cos.putObject({
          Bucket: config.Bucket,
          Region: config.Region,
          Key: `upload/`+file.file.name, // 存储的路径
          Body: fileInfo, // 上传对象
          onProgress: progressData => {//上传进度
            // console.log(progressData)
            const percent = parseInt(progressData.percent * 10000) / 100;
            const speed = parseInt((progressData.speed / 1024 / 1024) * 100) / 100;
            var total = progressData.total  //文件总大小
            var loaded = progressData.loaded //文件已上传大小
            // console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');
            // if (!that.isJindu) {
              that.isJindu = true;
              that.isZuzhi = true;
              // console.log('total'+total)
            // }
            that.videoPercent = parseInt((loaded / total * 100).toFixed(0))//实时监测上传进度
            // if(that.videoPercent == 100){
            //   that.isJindu = false;
            // }
            console.log(that.videoPercent)
          },
          onTaskReady:taskId =>{
            console.log(taskId)
            that.taskId = taskId;
          },
        }, (err, data) => {
          console.log(data);
          console.log(err)
          if (data && data.statusCode == 200) {
            // setTimeout(function()  {
                that.isZuzhi = false
            // },1000)
            
            that.isshanchu = true;
            console.log(data);
            console.log('上传完成！');
          } else {
            console.log(err);
            console.log('上传失败！错误信息：' + err.message);
          }
        });

     },

      zhongzhi( file){
        console.log(this.taskId)
        cos.cancelTask(this.taskId);//终止上传cos
        this.isJindu = false;
      },

}

</script>