上传图片到腾讯对象存储

上传图片

自定义上传----上传到腾讯云—>腾讯云返回图片地址— 通过input事件把图片地址传给父组件

• 创建腾讯云存储桶列表 获取密钥，存储桶名称和地域名称
• 下载 cos-js-sdk-v5

npm i cos-js-sdk-v5

• 引入

import COS from 'cos-js-sdk-v5'

• 使用

// 选择图片上传
            uploadImage(params) {
              console.log(params.file)
              const cos = new COS({
                SecretId: 'xxxxx',
                SecretKey: 'xxxxx'
              }) // 完成cos对象的初始化
              cos.putObject({
                Bucket: 'xxx', // 存储桶名称
                Region: 'ap-nanjing', // 地域名称
                Key: params.file.name, // 文件名称
                StorageClass: 'STANDARD', // 固定值
                Body: params.file // 文件对象
              }, (err, data) => {
                if (data.statusCode === 200 && data.Location) {
                  // 拿到了腾讯云返回的地址  data.Location
                  // 通过input自定义事件将地址传出去
                  this.$emit('input', 'http://' + data.Location) // 将地址返回了
                } else {
                  this.$message.error(err.Message) // 上传失败提示消息
                }
              })
            }

• el-upload

 <el-upload
        class="avatar-uploader"
        action=""
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :http-request="uploadImage"
    >
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>