element文件上传进度条效果

:http-request="handleRequest"

 handleRequest(obj) {
      // console.log(obj)
      // 找到对应的上传的这个file的项
      const fileObj = this.fileList.find(item => item.uid === obj.file.uid)
      fileObj.status = 'uploading'// 要上传的文件状态改为uploading
      if (obj.file) {
        // 执行上传操作
        cos.putObject({
          Bucket: 'luoxue-1252247442', /* 存储桶 */
          Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
          Key: obj.file.name, /* 文件名 */
          StorageClass: 'STANDARD', // 上传模式, 标准模式
          Body: obj.file, // 上传文件对象
          //进度的回调函数，进度回调响应对象（progressData）
          onProgress: (progressData) => {
            //percentage  百分比
            fileObj.percentage = parseInt(progressData.percent * 100)
          }
        }, (err, data) => {
          // console.log(err || data)
          if (err) return console.log(err)
          if (data.statusCode === 200) {
            // console.log('地址:', 'https://' + data.Location)
            // console.log('uid:', obj.file.uid)

            // 更新状态
            fileObj.status = 'success'
            // 修改地址
            fileObj.url = 'https://' + data.Location
          }
          console.log(data)
        })
      }
    },

记得先导包,配置身份

import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: xxx, // 身份识别ID
  SecretKey: xxx // 身份秘钥
})

腾讯对象存储文档地址:https://cloud.tencent.com/document/product/436/64960