图片上传---腾讯云Cos的使用

306 阅读1分钟
<template>
  <div class="image-upload">
    <!-- action:设置默认上传文件的请求地址
  http-request:自定义上传图片,用于覆盖action属性
  file-list:文件上传列表,主要作用 用于图片的回显 -->
    <!-- 文件上传组件 -->
    <el-upload
      :class="{disable: filelist.length>0}"
      action="#"
      list-type="picture-card"
      :http-request="uploadFn"
      :file-list="filelist"
      :on-change="onSuccessFn"
      :on-remove="removeFn"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 进度条组件 -->
    <el-progress v-show="showProgree" :text-inside="true" :stroke-width="16" :percentage="num" />
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDEG2YsvhDSEjxvdFfqmRpwmMfjX6OQChv', // 身份识别 ID
  SecretKey: 'yh9JCpBG4dx1pMddNq30g4B2dwykGVUD'// 身份密钥
})

export default {
  data() {
    return {
      filelist: [ // 图片数据
        // {
        //  url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F30%2F90%2F40%2F309040a0602c672cebc6ab3a1bbbc8cd.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652923606&t=b9e7a26ec01c326f9f7b7616cf630862'
        // }
      ],
      num: 0,
      showProgree: false // 控制进度条的显示与隐藏
    }
  },
  methods: {
    // 图片上传的回调
    onSuccessFn(response) {
      // 点击上传按钮(加号)的时候显示图片进度条
      this.showProgree = true
      this.filelist.push({
        url: response.url,
        status: 'ready' // 上传成功与否的右上角状态图标 ready不成功
      })
    },
    // 实现把图片上传到腾讯云cos中
    uploadFn(file) {
      console.log(28, file)
      const filename = file.file.name.split('.')[0]
      // 实现图片上传到腾讯云
      cos.putObject({
        Bucket: 'hr-project-73-1311279925', /* 储存桶名字 必须 */
        Region: 'ap-guangzhou', /* 存储桶所在地域,必须字段 */
        Key: filename, /* 上传后的文件名 自定义即可 必须 */
        StorageClass: 'STANDARD', // 上传的模式类型 直接默认 标准模式即可
        Body: file.file, // 上传文件对象
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))
          // 设置图片上传进度条百分比
          this.num = progressData.percent * 100
        }
      }, (err, data) => { // 这里要用箭头函数,this指向才对,普通函数this指向就不对了
        // data返回数据之后 应该如何处理
        // console.log(err || data)
        if (err) {
          return this.$message.error('图片上传失败')
        }
        this.filelist[0].url = 'https://' + data.Location
        // 添加图片 上传成功的图标(显示在图片右上角的位置)
        this.filelist[0].status = 'success'
        // 上传完成后,隐藏进度条
        this.showProgree = false
      })
    },
    // 删除图片
    removeFn() {
      this.filelist = []
    }
  }
}
</script>

<style lang="scss">
.image-upload{
    position: relative;
    display: inline-block;
    .disable{
        .el-upload--picture-card{
            display: none;
        }
    }
    // 进度条样式
    .el-progress{
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}
</style>