vue项目，实现腾讯云上传图片

准备事项

通过npm i cos-js-sdk-v5下载cos-js-sdk-v5，然后在做图片上传的组件里，通过import COS from 'cos-js-sdk-v5'引入cos-js-sdk-v5.

前端部分

解析：这里使用的是element ui 中的上传文件的组件，action表示上传的地址；http-request表示覆盖默认的上传行为，可以自定义上传的实现，类型是function,所以这里的uploadimg是函数；limit表示最多能传多少张图片；list-type表示文件列表的类型；on-change表示文件上传成功或者上传失败是都会触发的函数；auto-upload表示是否在选取文件后立即进行上传；dialogVisible表示当图片上传成功后就会在页面显示该图片；imgURL表示图片上传成功后的url地址；

<div style="display:flex;">
              <span style="display: inline-block;width: 91px;">身份证头像:</span>
              <el-upload
                action="#"
                :http-request="uploadImg"
                :limit='1'
                list-type="picture-card"
                :on-change="changeHandle"
                :auto-upload="true"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" append-to-body>
                <img width="100%" :src="imgURL" alt="">
              </el-dialog>
            </div>

js部分

在实现图片上传的页面里，引入import COS from 'cos-js-sdk-v5'

import COS from 'cos-js-sdk-v5
data(){
	return{
	// 修改作品信息弹窗显示与否
      dialogVisible: false,
      // 图片文件
      imgFile: '',
      // 图片文件名称
      fileName: '',
      // 上传成功后的地址
      imgURL: '',
	}
},
methods:{
	// 获取该文件的对象，如下图1-1
    changeHandle (file, fileList) {
      this.imgFile = file
      this.fileName = file.name
    },
  // 实现上传图片
  uploadImg () {
      // 创建COS实例  获取签名
      //这里写你们后端提供的请求接口即可，这里调用的接口是为了获取tmpSecretId、tmpSecretKey、sessionToken、expiredTime这些值
      this.axios.post('接口地址').then(res=>{
        const data = res.data.content
        const cos = new COS({
        // 必选参数
        getAuthorization: (options, callback) => {
          const obj = {
            TmpSecretId: data.tmpSecretId,
            TmpSecretKey: data.tmpSecretKey,
            XCosSecurityToken: data.sessionToken,
            StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
            ExpiredTime: data.expiredTime // 时间戳，单位秒，如：1580000900
          }
          callback(obj)
          // 上传图片  其中Bucket 和 Region找你们负责人拿，Bucke和Region是由公司负责人使用公司账户，登入腾讯云，获取回来的。
          //key 在前面加上路径写法可以生成文件夹
          cos.putObject({
            Bucket: 'xunahua-face-1307070664', /* 必须 */
            Region: 'ap-beijing', /* 存储桶所在地域，必须字段 */
            Key: '/img/' + new Date().getTime() + this.fileName, /* 必须 */
            StorageClass: 'STANDARD',
            Body: this.imgFile.name, // 上传文件对象
            onProgress: progressData => {
            }
          }, (err, data) => {
            // 将上传后的封面进行路径拼接保存到本地
            // console.log(err || data)
            const url = 'https://' + data.Location
            this.imgURL = url
          })
        }
      })
      })
    },

}

图1-1选择图片后的对象信息