在Vue2.X使用element-ul中upload组件上传素材到 COS（腾讯云对象存储）

第一部分：准备工作

1. 创建 cos 存储桶，得到密匙
2. 安装 cos， npm i cos-js-sdk-v5

第二部分：开始写代码

一.页面结构部分template

<template>
  <div>
    <!-- list-type:文件列表的类型 -->
    <!-- action：文件上传时的服务器提交地址，我们当前项目自定义上传地址 -->
    <!-- file-list文件默认列表 -->
    <!-- on-preview：文件预览时候调用函数 -->
    <!-- on-remove：图片删除的时候调用函数 -->
    <!-- limit:限制图片上传数量 -->
    <!-- http-request:自定义上传方式：文件上传到腾讯云cos的时候触发 -->
    <!-- on-change:文件从本地上传到浏览器的时候触发 -->
    <el-upload
      action="#"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :file-list="fileList"
      :http-request="handleRequest"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>
</template>

 二.script结构页面部分

<script>
import COS from 'cos-js-sdk-v5'
// 图片上传到云服务器
var cos = new COS({
  //写入密匙
  SecretId: 'xxxxxxxxxxxxxxxxxxx',
  SecretKey: 'xxxxxxxxxxxxxxxxxxx'
})

export default {
  name: 'ImageUpload',
  data() {
    return {
      // 默认浏览器已经存在的图片信息
      fileList: [
        { name: 'food.jpeg', url: '图片地址：页面默认图片' },
        { name: 'food2.jpeg', url: '图片地址：页面默认图片' }
      ],
      // 点击放大:展示的图片信息
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log('文件删除的时候被调用', file, fileList)
    },
    handlePictureCardPreview(file) {
      console.log('文件预览被调用', file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleChange(obj) {
      console.log('文件从本地上传到浏览器的时候触发', obj)
      // 文件上传的时候把obj传给data
      this.fileList = [...this.fileList, obj]
    },
    handleRequest(obj) {
     console.log('图片上传到服务器时触发', obj)
     // 图片上传到云服务器
     /*
     上传对象
     简单上传接口适用于小文件上传，大文件请使用分块上传接口
     */
     cos.putObject({
      Bucket: 'xxxxx-123456789', /* 必须填入自己的储存桶名 */
      Region: 'ap-beijing', /* 存储桶所在地域，必须字段 */
      //由于key写的固定值,导致对象储存桶中文件名一直都是一样的,返回的地址也是一样的!!
      Key: Date.now() + obj.file.name, /* 必须填入存储的储存桶的对象键 */
      StorageClass: 'STANDARD',
      Body: obj.file, // 上传文件对象
      onProgress: function(progressData) {
        // 打印了两次
        // 第一次打印：{"loaded":0,"total":28904,"speed":0,"percent":0}
        // 第二次打印：{"loaded":28904,"total":28904,"speed":41889.86,"percent":1}
        console.log(JSON.stringify(progressData))
      }
    }, function(err, data) {
      // 若上传失败，会打印err,上传成功则会打印data
      console.log(err || data)
    })
  }
}
}
</script>

 使用技巧

通常情况下我们只需要创建一个 COS SDK 实例，然后在需要调用SDK方法的地方直接使用这个实

例即可，示例代码如下：

公共部分：
import COS from 'cos-js-sdk-v5'
// 图片上传到云服务器
var cos = new COS({
  //写入密匙
  SecretId: 'xxxxxxxxxxxxxxxxxxx',
  SecretKey: 'xxxxxxxxxxxxxxxxxxx'
})

上传对象

简单上传接口适用于小文件上传，大文件请使用分块上传接口，详情请参见 对象操作 文档。

cos.putObject({
    Bucket: 'examplebucket-1250000000', /* 必须填入自己的储存桶名 */
    Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
    //由于key写的固定值,导致对象储存桶中文件名一直都是一样的,返回的地址也是一样的!!
    Key: 'exampleobject',             /* 必须填入存储的储存桶的对象键 */
    StorageClass: 'STANDARD',
    Body: fileObject, // 上传文件对象
    onProgress: function(progressData) {
        console.log(JSON.stringify(progressData));
    }
}, function(err, data) {
    // 若上传失败，会打印err,上传成功则会打印data
    console.log(err || data);
});

查询对象列表

cos.getBucket({
    Bucket: 'examplebucket-1250000000', /* 必须 */
    Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
    Prefix: 'a/',           /* 非必须 */
}, function(err, data) {
    console.log(err || data.Contents);
});

下载对象

该接口用于读取对象内容，如果需要发起浏览器下载文件，可以通过 cos.getObjectUrl 获取 url 再触发浏览器下载，具体请参见 预签名 URL 文档。

cos.getObject({
    Bucket: 'examplebucket-1250000000', /* 必须 */
    Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
    Key: 'exampleobject',              /* 必须 */
}, function(err, data) {
    console.log(err || data.Body);
});

删除对象

cos.deleteObject({
    Bucket: 'examplebucket-1250000000', /* 必须 */
    Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
    Key: 'exampleobject'        /* 必须 */
}, function(err, data) {
    console.log(err || data);
});