Cos上传(腾讯云):图片存储方案

Cos上传(腾讯云)

01.图片存储方案介绍

目标

了解主流的图片存储方案

两种常见方案

方案一：存到自己公司购买的服务器上

优点：好控制

缺点：成本高由于图片都存放到自己的服务器上，占据空间很大

方案二：存到三方云服务器（阿里云，七牛云，腾讯云）

各种云有专门的为图片存储提供的云服务器，我们自己的服务器只存储图片地址即可

02.腾讯云cos申请配置

目标

使用现成的腾讯云服务创建一个免费的云存储。

官网：https://cloud.tencent.com/

创建账号并实名认证

在腾讯云中创建帐号并实名认证

开通对象存储

（实名认证，视频校验，居住地址，…）

创建存储桶

设置cors规则

在存储桶列表中，选中存储桶

在左侧的菜单中选安全管理

因为我们是在测试上传，全部容许上传即可，真正的生产环境需要单独配置具体的域名和操作方法

配置云API秘钥

服务器属于个人的，需要一定的权限才能自由上传图片，这个负责权限验证的其实就是秘钥。拥有秘钥是进行上传的基础条件。

密钥配置

API密钥管理

安全性提示

实际工作中，秘钥属于敏感信息，不能直接放到前端存储，容易产生安全问题，更好的做法是把秘钥交给后端管理，前端通过调用接口先获取秘钥，有了秘钥之后再进行上传操作

实际使用

安装腾讯云js-sdk

npm i cos-js-sdk-v5

(imageUpload组件封装)

<template>
  <div>
    <!-- el-upload -->
    <!-- action :必选参数，上传的地址
    show-file-list: 是否显示已上传文件列表
    on-success:文件上传成功时的钩子 -->
    <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="uploadImage"
    >
      <img v-if="value" :src="value" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  methods: {
    uploadImage(e) {
      console.log(e) // 上传的图片是e.file
      console.log(e.file)
      const cos = new COS({
        SecretId: 'AKID4zhBRirnVyCD0Zu1xfNs9XjiX9ZkhPrw',
        SecretKey: 'xhDUbVCftyrY3NXbVEpGVWK0UkmaFiCi'
      }) // 完成cos对象的初始化
      cos.putObject({
        Bucket: 'web90-1318397310', // 存储桶名称
        Region: 'ap-nanjing', // 地域名称
        Key: e.file.name, // 文件名称
        StorageClass: 'STANDARD', // 固定值
        Body: e.file // 文件对象
      }, (err, data) => {
        if (data.statusCode === 200 && data.Location) {
          console.log(data)
          // 拿到了腾讯云返回的地址
          // 通过input自定义事件将地址传出去
          this.$emit('input', 'http://' + data.Location) // 将地址返回了
        } else {
          this.$message.error(err.Message) // 上传失败提示消息
        }
      })
    },
    handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

nt-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}