一、微信小程序(简单上传)-存储图片视频文件

---

cos对象存储，可以存储图片视频以及任何格式的文档。
以下介绍怎么使用cos存储图片视频文件，需要做什么配置，如何使用。
想了解更多-请访问cos对象存储开发文档。
想了解分块上传/断点续传-请访问微信小程序分块上传/断点续传。

---

一、微信小程序怎么引入cos？

安装方式，有俩种：一手动安装，就是在官网将cos源码放在自己项目下；二是通过npm安装(推荐使用)
通过npm安装cos-wx-sdk-v5，

npm install cos-wx-sdk-v5
// 安装完成之后
// 程序代码使用 var COS = require('cos-wx-sdk-v5'); 进行引用

二、使用配置

1、使用前配置白名单
小程序里请求 COS 需要登录到 微信公众平台，选择开发 > 开发设置 > 服务器域名，配置域名白名单。SDK 使用到了两个接口：

• cos.postObject 使用 wx.uploadFile 方法。
• 其他方法使用 wx.request 方法。

也就是说：
用 cos.postObject 需要配置 uploadFile 合法域名白名单即可。
其他 cos api 则需要配置 request 合法域名白名单。
例如：https://存储桶名称.cos.ap-存储桶地域.myqcloud.com
当然如果你的存储桶开启了cdn加速域名，需要配置cdn域名进去。开了cdn域名的话，你访问时是通过cdn域名访问的

三、代码实现-小程序简单上传

创建一个cosSdk.js文件，里面写上 cos初始化， 存储文件， 获取文件访问地址
1、建议使用临时秘钥进行调用SDK，cos初始化

// 这里面针对不同环境，配置着不同的cos存储桶名称，地域和访问地址前缀
import { EnvConfig } from '../config/index';
const COS = require('cos-wx-sdk-v5');
const app = getApp();

// 初始化
export const cos = new COS({
  Protocol: 'https:', // 请求协议： 'https:' 或 'http:'
  // 强烈建议，高级上传、批量上传内部对小文件做简单上传时使用putObject,sdk版本至少需要v1.3.0
  SimpleUploadMethod: 'putObject',
  getAuthorization: function (options, callback) {
  	// 这里调用后端接口获取访问SDK的临时秘钥
    app.api.getCos().then(res => {
      console.log('cos临时秘钥----------', res);
      if (res?.Body) {
        callback({
          TmpSecretId: res.Body.TmpSecretId,
          TmpSecretKey: res.Body.TmpSecretKey,
          // v1.2.0之前版本的 SDK 使用 XCosSecurityToken 而不是 SecurityToken
          SecurityToken: res.Body.SessionToken,
          // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
          StartTime: res.Body.StartTime, // 时间戳，单位秒，如：1580000000
          ExpiredTime: res.Body.ExpiredTime, // 时间戳，单位秒，如：1580000900
        })
      };
    });
  }
});

2、简单上传，存储文件

/**
 * 简单上传
 * @fileName *必须 文件名
 * @filePath *必须 文件路径
 * @storagePath *非必须 cos存储桶路径 默认存储在static文件夹下
 * ImgcallBack 回调函数，在调用cosUploadImg上传方法是，可通过此回调函数拿到存储对象的访问Url
 */
export function cosUploadImg(file, ImgcallBack) {
  // 参数校验(俩必传一非必传)
  if (!file.fileName || !file.filePath) {
    console.error('【putObject】简单上传,参数fileName文件名、参数filePath文件路径是必须');
    return;
  };
  // 配置上传需要的参数
  const { fileName, filePath } = file;
  const storagePath = file.storagePath || 'static/';
  const fileSuffix = (filePath.substr(filePath.lastIndexOf('.')));
  const ObjectData = {
    Bucket: EnvConfig.cosConfig.Bucket, // 存储桶名称
    Region: EnvConfig.cosConfig.Region, // 存储桶地域
    Key: storagePath + fileName + fileSuffix, // 存储在桶里的对象键
  };
  // 使用 FilePath 参数需要 sdk 版本至少达到v1.3.0
  cos.putObject({
    ...ObjectData,
    FilePath: filePath, // FilePath传入的是文件路径
  }, function(err) {
  	// 上传失败
    if (err) {
      wx.showToast({
        title: '【图片上传】上传失败',
        icon: 'none',
        mask: true,
      });
      return;
    };
    // 上传成功后-拿到访问地址-并抛出
    getCosObjectUrl({
      ...ObjectData,
      Sign: false, // true获取带签名的对象URL
    }, (res) => {
      // 这里res，是function getCosObjectUrl(data, urlCallBack)中urlCallBack回调函数中传过来的
      ImgcallBack(res, ObjectData);
    });
  });
}

3、获取文件访问地址

// 拿到对象的访问URL
function getCosObjectUrl(data, urlCallBack) {
  cos.getObjectUrl(
    { ...data },
    function (err, data) {
      if (err) {
        return console.error('【getObjectUrl】获取存储对象Url失败', err);
      };
      /* url为对象访问 url */
      const CosObjectUrl = data.Url;
      // 将拿到的访问url，传入回调函数中
      urlCallBack(CosObjectUrl);
    }
  );
}

---

四、获取时效的访问url

1、访问Url的时效性。

• 前端在获取访问url时，传入一个Sign参数，值为true
• 后端在获取并返回临时秘钥，设置时效性就可以
• 如果设置时效3600s，那么获取到访问地址后一个小时内是有效的

function getCosObjectUrl(data, urlCallBack) {
  cos.getObjectUrl(
    {
       ...data,
      Sign: true, // true获取带签名的对象 URL
      Expires: 3600, // 与后端请求的临时秘钥时效保持一致
      Method: 'GET',
    },
    function (err, data) {
      if (err) {
        return console.error('【getObjectUrl】获取存储对象Url失败', err);
      };
      /* url为对象访问 url */
      const CosObjectUrl = data.Url;
      // 将拿到的访问url，传入回调函数中
      urlCallBack(CosObjectUrl);
    }
  );
}

问题小事项

1、拿到访问url时，想进行图片裁切，在访问Url后面拼接上
?imageMogr2/cut/1480x1250x140x100

• cut：自定义裁切
• 1480x1250：裁切后的图片的宽高
• 140x100：裁切点的位置；以左上角为基点，140距离左边的宽，100距离上边的高。
• 拼接后，形成新的访问URL，这访问的就是裁切后的图片。
• 图片处理不止自定义裁切，还有其他基础图片处理，可访问图片处理查看。

2、cos.putObject方法不是说只能上传图片，也可以上传视频和文档。在上传时，需要注意存储在桶里的对象键Key的文件后缀。在上面示例代码里：

• Key: storagePath + fileName + fileSuffix, // 存储在桶里的对象键
• storagePath 是存储路径
• fileName 存储的文件名
• fileSuffix 存储的文件后缀
  如果存储的是图片的话，fileSuffix 值可以是.png .jpg .gif等
  如果存储的是视频的话，fileSuffix 值可以是.mp4等
  如果存储的是文档的话，fileSuffix 值可以是.xlx .txt .pdf等

例如：下面，存储桶的static文件夹下的 域名白名单.png图片。
storagePath：static/
fileName：域名白名单
fileSuffix：.png
那么存储在桶里的对象键Key：static/域名白名单.png