腾讯云的图片上传与下载

1、下载cos-js-sdk-v5.js

下载地址：https://gitee.com/hxnamei/codes/b492wkvnher15p6xyz0q887

2、引入cos-js-sdk-v5.js文件

import  COS  from '../../../public/jslib/cos-js-sdk-v5'

Vue.prototype.COS = COS，

 

 

 

 3.配置腾讯云的存储桶

var COS = Vue.prototype.COS;

var Bucket = "53-1256586210"; //腾讯云对象储存桶名

var Region = "ap-shanghai"; //对象储存你所处的地区编号

var cos = new COS({

  getAuthorization: function(options, callback) {

    var authorization = COS.getAuthorization({

      SecretId: "AKIDujY7RXIWAZqwoSF86pQuJVS9bomUlLQG", // 可传固定密钥或者临时密钥

      SecretKey: "wd5IEuNa7OOSJuFe092hPs63mkTyDBwV", // 可传固定密钥或者临时密钥

      Method: options.Method,

      Pathname: options.Pathname,

      Query: options.Query,

      Headers: options.Headers,

      Expires: 900

    });

    callback({

      Authorization: authorization

      //  XCosSecurityToken: credentials.sessionToken, // 如果使用临时密钥，需要传 XCosSecurityToken

    });

  }

});

4、上传和下载的方法

shangchuan(e) {

      var file = e.target.files[0];

      if (!file) return; // 分片上传文件

      var a = Math.random();

　　//上传

      cos.putObject(

        {

          Bucket,

          Region,

          // StorageClass: 'STANDARD',

          Key: file.name,

          Body: file,

          onProgress: function(progressData, callback) {

           

          }

        },

        function(err, data) {

          if(data.statusCode == 200){

                Vue.prototype.$message({

                    message: '上传成功',

                    type: 'success'

               })

          }else{

              Vue.prototype.$message({

                    message: '上传失败',

                    type: 'warning'

               })

          }

        }

      );

　　//得到图片的url

      cos.getObjectUrl(

        {

          Key: file.name,

          Bucket,

          Sign: false,

          Region

        },

        function(err, data) {

          // document.getElementById('imgupload').src=data.Url;

        }

      );

    }

5、图片展示

https://20200508-tvweb-1255674295.cos.ap-nanjing.myqcloud.com/+图片名字

注：https://20200508-tvweb-1255674295.cos.ap-nanjing.myqcloud.com/可以通过  cos.getObjectUrl的document.getElementById('imgupload').src=data.Url;获取

例子：

 <img :src="`https://20200508-tvweb-1255674295.cos.ap-nanjing.myqcloud.com/${scope.row.background_picture}`">