小程序上传图片到七牛云

前言

最近在做小程序用户信息收集时发现用户选择完头像保存到数据库之后无法访问的情况，后面仔细排查了选择头像后返回的内容发现问题。

准备

微信开发者工具基础库版本：3.7.0

服务端：Golang

我们先看下选择头像的方法

小程序最新公告获取用户头像和昵称需要手动选择具体查看小程序公告

// 这里是小程序最新改版后的选择头像方式 
<button class="bottom-avatat" open-type="chooseAvatar" bindchooseavatar="handleChooseavatar">
  上传头像
</button>

// 用户选择头像后的回调函数携带用户头像信息
handleChooseavatar(res) {
  console.log("头像", res);
}

返回用户头像信息

{avatarUrl: "http://tmp/HMGdsVqDrSn88874efe7e9cf1b9721b1f3afd74ff694.jpg"}

根据返回参数不难发现上传的地址是：http://tmp/HMGdsVqDrSn88874efe7e9cf1b9721b1f3afd74ff694.jpg。这个地址后续是无法访问地，我们需要把他上传到自己的服务器保存。

我选择的是将图片保存到七牛云上

首先我们要生成七牛云上传凭证 Golang 生成，其他服务端语言自行编写

var (
  accessKey = "七牛云 accessKey"
  secretKey = "七牛云 secretKey"
  bucket    = "自己的 对象存储空间 "
)
​
func GetQiniuToken(c *gin.Context) {
  mac := credentials.NewCredentials(accessKey, secretKey)
​
  putPolicy, err := uptoken.NewPutPolicy(bucket, time.Now().Add(1*time.Hour))
  // 这里是返回配置 根据自己需要
  putPolicy.SetReturnBody(`{"key":"$(key)","hash":"$(etag)"}`)
  if err != nil {
  // 根据自己需要返回错误信息
    return
  }
  upToken, _ := uptoken.NewSigner(putPolicy, mac).GetUpToken(context.Background())  
  
  c.JSON(http.StatusOK, gin.H{
      "token": upToken
    })
}

修改一下选择头像后的处理方法

handleChooseavatar(res) {
    const uploadTask = wx.uploadFile({
      url: 'http://七牛存储所在地区根据实际情况填写',
      filePath: res.detail.avatarUrl, // 选择 头像后的临时访问地址
      name: 'file',
      formData: {
        'token':'这里是获取的服务端返回的 七牛上传凭证 token ',
      },
      success: res => console.log("---- 上传成功 -----", res),
      fail: err => console.log("---- 上传失败 ----", err)
    })
  },

上传成功后会返回​服务端配置的信息：{"key":"$(key)","hash":"$(etag)"}

至此头像上传成功
访问路径​：七牛文件管理配置的外联域名 + key
例如：七牛文件管理配置的外联域名​：http://qiniu.wailian.cn
key:FlNm_pkkkv6_pw_vzyp6kj0zqnk
​文件访问地址：

http://qiniu.wailian.cn/FlNm_pkkkv6_pw_vzyp6kj0zqnk

到这里大功告成​

小程序的其他文件上传也可以采用这种方式​