腾讯云（2）实现图片上传、删除。

通过一个vue案例实现

案例使用到了Element

首先获取密钥ID和key

选择新建密钥

然后点击显示按照步骤完成即可获得密钥
SecretId ：开发者拥有的项目身份识别 ID，用以身份认证，可在 API 密钥管理 页面获取
SecretKey ：开发者拥有的项目身份密钥，可在 API 密钥管理 页面获取

注意，上述的参数我们在本次开发过程中，直接将参数放置在前端代码中存储，但是腾讯云本身是
不建议这么做的，因为 敏感信息 放在前端很容易被捕获，由于我们本次是测试研发，所以这个过
程可以忽略
正确的做法应该是，通过网站调用接口换取敏感信息

实例化 上传sdk

var cos = new COS({
    
SecretId: 'COS_SECRETID', 
// 身份识别 
ID SecretKey: 'COS_SECRETKEY', 
// 身份密钥 
});

我们的准备内容就已经ok了，接下来，我们在 src/componets 新建一个
ImageUpload 组件

完成图片上传需要满足的要求：

1. 可以显示传入的图片地址
2. 可以删除传入的图片地址
3. 可以上传图片到云服务器
4. 上传到腾讯云之后，可以返回图片地址，显示
   
   首先我们需要安装JavaScript SDK

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

在组件页面引入

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

HTMl

<template>
  <div class="imageUplod">
    <el-upload
      class="avatar-uploader"
      list-type="picture-card"
      :limit="5"
       action="#"
      :file-list="fileList"
      :http-request="upload"
      :on-change="change"
      :on-remove="onRemove"
       
    >
      <i class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

JS

data () {
   
    return {
   
      fileList: [], // 图片地址设置为数组
      imgUrl: '',
      imgUid: null,
    }
  },
methods:{
   
upload (params) {
   
      this.imgUid = params.file.uid
      cos.putObject({
   
        Bucket: '存储桶的名称', // 存储桶
        Region: 'ap-nanjing', // 地域
        Key: params.file.name, // 文件名
        Body: params.file, // 要上传的文件对象
        StorageClass: 'STANDARD',
        onProgress: (params) => {
   
          this.percentage = params.percent * 100
        }// 上传的模式类型 直接默认 标准模式即可
        // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件 格式 名称 回调
      },(err, data) => {
   
        // data返回数据之后 应该如何处理
        // console.log(err || data)
        if (err) return
        this.fileList = this.fileList.map(item => {
   
          if (this.imgUid === item.uid) {
   
            return {
   
              url: 'http://' + data.Location,
              name: item.name
            }
          }
          return item
        })
        // console.log(this.fileList)
      })
    },
    // 得到上传成功的数据
    change (file, fileList) {
   
      // console.log(file)
      // console.log(fileList)
      this.fileList = fileList
    },
    // 删除图片
    onRemove (file, fileList) {
   
      console.log(file + fileList)
      // 删除v本地
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      // 删除腾讯云
      cos.deleteObject({
   
        Bucket: '021102dsn-1305896544', // 存储桶
        Region: 'ap-nanjing', // 地域
        Key: file.name // 文件名
      }, (err, data) => {
   
        // data返回数据之后 应该如何处理
        console.log(err || data)
        // this.$message.success(err || data)
      })
    },
}

cos.deleteObject和 cos.putObject详细解释参考 JavaScript SDK 对象存储桶操作

http-request、on-change、on-remove方法。