<template>
    <div class="hello">
        <el-upload
                ref="upload"
                multiple
                :http-request="handleUpload"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :limit="10"
                :show-file-list="true"
                :file-list="fileList">
            <el-button
                    type="success"
                    icon="el-icon-upload"
                    size="mini">添加附件
            </el-button>
        </el-upload>
    </div>
</template>

<script>
// 这里要引入COS 和 你们团队使用的Ajax库
  export default {
    name: 'hello',
    data() {
      return {
        fileList: [],
        cos:null
      }
    },
    methods: {
      handleRemove(file, fileList) {
        this.researchForm.fileList = fileList;
        console.log(this.researchForm.fileList);
      },
      handleExceed() {
        this.$message.warning({
          message: '不能超过10个附件'
        })
      },
      handleUpload(param) {
        const self = this;
        let file = param.file;
        if (!file) return;
        let originName = file.name;
        let originSize = file.size;
        let originType = file.type;
        uAxios.get('/api/qcloud/secret').then(res => {
          let result = res.data.data;
          self.cos = new COS({
            getAuthorization: function (options, callback) {
              callback({
                TmpSecretId: result.tmp_secret_id,
                TmpSecretKey: result.tmp_secret_key,
                XCosSecurityToken: result.xcos_security_token,
                ExpiredTime: result.expired_time,
              });
            }
          });
          let bucket = result.bucket;
          let region = result.region;
          let upload_dir = result.dir;
          self.cos.putObject({
            Bucket: bucket,
            Region: region,
            Key: result.dir + file.name,
            Body: file
          }, function (err, data) {
            console.log(err || data);
            if (err) {
              self.$message.error({
                message: err.error
              });
            } else {
              let file_path = 'https://' + bucket + '.cos.' + region + '.myqcloud.com/' + upload_dir + file.name;
              console.log('文件上传成功 ' + file_path);// 得到的file_path 就是上传到腾讯云的路径，将这个URL传给后端即可
            }
          });
        });
      },
    }
  }
</script>