Vue项目和小程序项目图片上传腾讯云实现

前言

做过小程序的人大概都知道，由于小程序限制包的大小，所用的图片不会直接放在项目中，一般的处理方法都是上传到服务器利用http或者https请求的，虽然多了一些http的网络请求，但是能很好解决包大小的问题。我们项目是上传到腾讯云COS存储。

我们前端项目和小程序都用到了这种形式，vue项目用的是存储桶的形式，而小程序用的是直接上传到指定目录的形式，起始两种方式本质上实现的原理是一样的，使用方法也是大同小异。这里总结一下两种方式的不同实现供大家参考。

准备工作

首先你要知道腾讯云存储桶的一些必要信息，比如存储桶的名字、所属地域等。如果这些信息是由后台或者运维人员开通的，而恰好你本人不清楚的话，那么你可以咨询相关同事。但如果你有权限去查看这些信息的话，一样没有问题。

其次，为了安全考虑，一般每次上传，都要从后台获取一次临时密钥。密钥会包含一些key,token等信息。如果这些前提工作你都已经了解并清楚了，那么可以继续往下看~

我们将区分vue项目和小程序项目分开实现

VUE项目

1、一般前端项目我们依赖cos-js-sdk-v5插件

npm i cos-js-sdk-v5 --save

2、引入模块

import COS from 'cos-js-sdk-v5'

3、存储桶可以POST上传或者PUT上传，PUT之前有些过一篇相关的，这次我们用POST上传实现。

上传对象到COS腾讯云时，需要携带临时签名。生成临时签名前需要先获取临时密钥

      const cos = new COS({
        getAuthorization: async function (options, callback) {
        // 获取临时密钥
          const url =`xxxx`; // 这里的URL是后台获取COS临时密钥的地址
          // 这里一般就是axios请求后台接口
          const res = await request({
            url,
            method: "get",
            data: {
              value: xxx, // 根据具体逻辑业务而定
            }
          });
          // 一般包含id, key, token等安全信息 可根据具体业务场景而定
          const {TmpSecretId, TmpSecretKey, SecurityToken, expiredTime} = res;
          return {
              TmpSecretId,
              TmpSecretKey,
              SecurityToken,
              StartTime: Math.floor(Date.now() / 1000), // 开始时间
              ExpiredTime: Math.floor(expiredTime / 1000), // 结束时间
          }
      });
      
      // 上传文件
      const upLoadFile =  (file) => new Promise((resolve, reject) => {
        cos.uploadFile({
          Bucket: `自己项目的存储桶名称`, // 存储桶名称
          Region: `自己项目的存储桶域名`, // 所属域名
          Key: `自己项目的要上传的存储桶路径`, // 路径
          Body: file, // 文件
        }, (err, data) => {
          if (err) {
            reject()
          } else {
            // data就是获取到的相应的存储信息
            resolve(data)
          }
        })
      });

```js

小程序项目

这里主要贴重要代码，与项目相关的删除

const prefix =
  'https://' + `自己的存储桶名称` + '.cos.' + `自己的存储桶域名` + '.myqcloud.com'
  
// 上传文件
async function uploadFile(filePath) {
  const Key = `要上传的文件名 一般在filePath对象中` // 这里指定上传的文件名
  // 这里的就是获取的临时密钥和签名 与上述vue项目相同，不重复
  const authorization = await getAuthorization()
  const res = await wx.uploadFile({
    url: prefix,
    name: 'file',
    filePath: filePath,
    formData: {
      key: `自己项目要上传的存储桶地址路径` + Key,
      success_action_status: 200,
      // 这里依照获取到的信息/不同项目要求填写
      Signature: `authorization.xxx`,
      'x-cos-security-token': `authorization.xxx`,
      'Content-Type': '',
    },
  })
  if (res.statusCode === 200) {
    return (
        prefix +
        `自己项目要上传的存储桶地址路径` +
        encodeURIComponent(Key) +
        `?timestamp=${Date.now()}`
      )
   
}