腾讯云对象存储，图片上传

配置腾讯云Cos

在这我们以一个简单的上传图片为例，来用一下腾讯云对象存储

上边图的意思是，我们可以找一个免费上传图片的服务器，帮我们代管图片，我们在自己的数据库里只保存一个地址就行，这其实也是很多项目的处理方案，会有一个公共的文件服务器

第一步，我们必须先拥有一个腾讯云的开发者账号

请按照腾讯云的注册方式，注册自己的账号

第二步，实名认证

选择个人账户

下一步，扫描二维码授权

手机端授权

点击领取免费产品


点击0元使用，开通服务

到这一步，账号的部分就操作完毕，接下来我门需要创建一个存储图片的存储桶
登录 对象存储控制台，创建存储桶。设置存储桶的权限为公有读，私有写

创建存储桶

设置cors规则

AllowHeader需配成*，如图所示

获取密钥

这个规则仅限于测试，正式环境的话，这里需要配置真实的域名地址

到这里，我们的腾讯云存储桶就设置好了

引入腾讯云包

首先我们要先安装SDK依赖

npm i cos-js-sdk-v5 --save

在项目中引入如下代码
var COS = require(‘cos-js-sdk-v5’);

这是里我们腾讯云提供的密钥，接下来我们就可以连接腾讯云的存储桶了
具体代码：

<el-upload
      class="avatar-uploader"
      :on-preview="preview"
      list-type="picture"
      action="#"
      :limit="2"
      :http-request="upload"
      :on-change="changeFile"
      :on-remove="handleremove"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-progress
      v-if="showpercent"
      style="width: 180px"
      :percentage="percent"
    />
    <el-dialog title="图片" :visible.sync="showDialog">
      <img :src="imgUrl" style="width: 100%" />
    </el-dialog>

export default {
  data () {
    return {
      fileList: [],//图片地址为数组
      showDialog: false,
      imgUrl: '',
      currentFileUid: '',
      showpercent: false,
      percent: 0
    }
  },
  methods: {
    beforeUpload (file) {
      console.log(file)
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!types.includes(file.type)) {
        this.$message.error('上传图片只能是JPG、GIF、BMP、PNG格式！')
        return false
      }
      const maxSize = 5 * 1024 * 1024
      if (maxSize < file.size) {
        this.$message.error('图片大小最大不能超过5M')
        return false
      }
      this.currentFileUid = file.uid
      this.showpercent = true
      return true
    },
    changeFile (file, fileList) {
      this.fileList = fileList.map(item => item)
    },
    handleremove (file) {
      console.log(file)
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      cos.deleteObject({
        Bucket: 'zhangjiawei-1305896912', /* 必须 */
        Region: 'ap-nanjing',     /* 存储桶所在地域，必须字段 */
        Key: file.name       /* 必须 */
      }, (err, data) => {
        if (!err && data.statusCode === 204) {
          this.$message.success('删除成功')
          return
        }
      });
    },
    preview (file) {
      this.imgUrl = file.url
      this.showDialog = true
    },
    upload (params) {
      if (params.file) {
        // 执行上传操作
        cos.putObject({
          Bucket: '', // 存储桶名字
          Region: '', // 地域
          Key: params.file.name, // 文件名
          Body: params.file, // 要上传的文件对象
          StorageClass: 'STANDARD',// 上传的模式类型 直接默认 标准模式即可
          // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件 格式 名称 回调
          onProgress: (params) => {
            this.percent = params.percent * 100
          }
        }, (err, data) => {
          // data返回数据之后 应该如何处理
          console.log(err || data)
          if (!err && data.statusCode === 200) {
            this.fileList = this.fileList.map(item => {
              if (item.uid === this.currentFileUid) {
                return { url: 'http//' + data.Location, upload: true }
              }
              return item
            })
            setTimeout(() => {
              this.showpercent = false//隐藏仅需条
              this.percent = 0
            }, 2000)
          }
        })
      }
    }
  }
}
</script>

详情请看腾讯云SDK文档