使用腾讯云COS上传图片实例

你的名字 2023-07-11 11:13 1阅读 0赞

###### *最新更新时间：2020年03月05日10:53:05* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：在微信小程序中接入腾讯云的COS服务，上传图片至腾讯云的实际应用方案

#### 概述 ####

> 对象存储（Cloud Object Storage，COS）是腾讯云提供的一种存储海量文件的分布式存储服务，用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。

> COS 通过控制台、API、SDK 和工具等多样化方式简单、快速地接入，实现了海量数据存储和管理。通过 COS 可以进行多格式文件的上传、下载和管理。腾讯云提供了直观的 Web 管理界面，同时遍布全国范围的 CDN 节点可以对文件下载进行加速。

#### 实例 ####

*  采用腾讯云方案存储的背景：

> 项目中上传图片到自己的服务器，已有方案使用过base64和二进制流的形式，base64上传方案前端压力过大性能不好，同时两种方案对自己的服务器写入压力过大，直接原因是自己服务器性能配置不高

*  在项目中接入COS对象，并上传图片

//第一步 获取后端定义好的存储路径
    getPicturePath();// /files/pic/2020/3/5
    //第二步 获取腾讯云存储对象，证书信息
    getCredential(){ 
    	http({ 
          url: 'getCredential',
          data: { },
          method: 'GET'
        }).then((res) => { 
          if (res.code == 100) { 
            var data = res.data;
            this.cosData = data;//存储桶数据
            var credentials = data.credentials;//存储桶证书信息
            this.credentials = { 
              TmpSecretId: credentials.tmpSecretId,
              TmpSecretKey: credentials.tmpSecretKey,
              XCosSecurityToken: credentials.sessionToken,
              ExpiredTime: data.expiredTime,
            }
          }
        })
    }
    //第三步 腾讯云存储对象实例化
    let _this = this;
    this.cos = new COS({ 
    	getAuthorization: function (options, callback) { 
    		callback(_this.credentials);//_this.credentials 存储桶证书信息
    	}
    });
    //第四步 向腾讯云上传图片
    postObject(tmpFilePath){ 
        let _this = this;
        //图片格式 tmpFilePath.substr(tmpFilePath.lastIndexOf('.'));
        var filename = "第一步的存储路径" + "32位uuid" + "图片格式";// /files/pic/2020/3/5 + 62dd6722-257f-4602-857d-9579a7239ad2 + .jpg"
        this.cos.postObject({ 
          Bucket: this.cosData.bucketName,//存储桶
          Region: this.cosData.region,//地域信息
          Key: filename,
          FilePath: tmpFilePath,
          onProgress: function (info) { }
        }, function (err, data) { 
          //如果向腾讯云上传图片失败 不再向自己服务器存储图片路径
          if (err){ 
            console.log(err);//uploadFile:fail url not in domain list
            return
          }
          //向自己服务器存储图片路径 data.Location filename
          sendFilePathToServer(data.Location);
        });
    }

*  第四步中回调函数中的data对象

data = { 
    	ETag: "1a8b856cebfc5a366c482a5ae42e8e0f",
    	Location: "",
    	statusCode: 200,
    	headers: { 
    		Connection: "close",
    		Content-Length: "0",
    		Date: "Wed, 04 Mar 2020 16:29:34 GMT",
    		ETag: "1a8b856cebfc5a366c482a5ae42e8e0f",
    		Location: "http://seal-test.cos.ap-beijing.myqcloud.com/" + "第四步的filename" ,
    		Server: "tencent-cos",
    		x-cos-request-id:
    "NWU1ZmQ3NmVfNmFiNzJhMDlfMWRkZGVfMTU1ZmYwYg==",
    	}
    }

*  uuid

> UUID 是 通用唯一识别码（Universally Unique Identifier）的缩写

/** * 生成uuid 32位 + 4个- * @return uuid */
    function uuid() { 
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) { 
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";
    
      var uuid = s.join("");
      return uuid;
    }

#### 参考资料 ####

*  [腾讯云][Link 1]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Link 1]: https://cloud.tencent.com/document/product/436/31953
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460