1. 背景

本文档是适用于后端部署在 微信云托管 (opens new window) 项目，并且针对文档，图片有上传需求的开发项目.

对象存储适用于前端各个环境:

• 微信小程序
• 公众号 H5
• 其他服务端

本文具体记录是 其他服务端 (web 端) 应该如何进行开发，其他环境，请见官方文档 (opens new window)

2. 文件上传连接获取

POST https://api.weixin.qq.com/tcb/uploadfile?access_token=ACCESS_TOKEN

• Secret 置换 token 需要在 Get 参数 access_token 传 token 令牌使用

• 如果使用微信云调用令牌获取的 token，Get 参数名 access_token 应替换为 cloudbase_access_token

• 如果使用开放接口服务则不需要传 Get 参数 access_token

这里直接从最先开始获取 access_token 的方法来说起

1. 获取 access_token

请求微信官方接口

https://api.weixin.qq.com/wx/cgi-bin/token

请求参数 :

属性	值
grant_type	client_credential
appid	开发者 id
secret	开发者 secret

2. 携带 token 请求地址

请求微信官方获取上传地址接口

https://api.weixin.qq.com/wx/tcb/uploadfile?access_token=${access_token}

请求参数:

属性	类型	说明
access_token/cloudbase_access_token	string	token
env	string	环境 ID
path	string	上传路径

会返回 上传url / token / authorization / 文件ID / cos文件ID 等信息，用于后续的文件上传接口调用

3. 上传文件

用户获取到返回数据后，需拼装一个 HTTP POST 请求，其中 url 为返回包的 url 字段，Body 部分格式为 multipart/form-data，具体内容如下：

属性	说明
key	请求包中的 path 字段
Signature	返回数据的 authorization 字段
x-cos-security-token	返回数据的 token 字段
x-cos-meta-fileid	返回数据的 cos_file_id 字段。必填，否则看似上传成功的文件下载时会报错，只能删除重传
file	文件的二进制内容

前端在整理 FormData 文件格式的时候，一定要注意 post 请求规范，

• key 中不能使用 $ 字符串拼接
• file 文件一定要放在最后，因为会有格式问题
• 点击查看更多 (opens new window)

警告

我开发过程中多次请求返回 返回的错误是 The body of your POST request is not well-formed multipart/form-data.

原因就是 将 file 文件放在了 formData 前面，因为二进制文本多长，会存在空格和换行，造成格式错误，坑！！！！

4. 下载文件

同样使用官方接口

POST https://api.weixin.qq.com/tcb/batchdownloadfile?access_token=ACCESS_TOKEN

请求参数:

属性	说明
access_token/cloudbase_access_token	token
env	环境 ID
file_list	文件列表 (Array [object]) 携带文件 id

5. 代码示例

// 请求 token
axios.get('/wx/cgi-bin/token',{
    params:{
      grant_type:'client_credential',
      appid:'wx2642c8d1165936df',
      secret:'3acb028c5d39cb57ce3c9e9be0ca1943'
    }
  }).then(res=>{
    let access_token = res.data.access_token
  // 请求 上传地址
    axios.post(`/wx/tcb/uploadfile?access_token=${access_token}`,{
      env:'prod-9ga9a3ymee0975b9',
      path:`web/${data.file.name}`
    }).then(res=>{
      let {url,token,authorization,cos_file_id} = res.data
      let key = `web/${data.file.name}`
      const fd = new FormData()
      fd.append('key',key)
      fd.append('Signature',authorization)
      fd.append('x-cos-security-token',token)
      fd.append('x-cos-meta-fileid',cos_file_id)
      fd.append('file', data.file,data.file.name)
      // 上传文件
      axios.post(url,fd,{
      }).then(res=>{
        formInline.address = url
      }).finally(() => (loading.value = false))
    })
  })