关于小程序上传图片到七牛的总结

时间:2018-09-18 19:10:40   收藏:0   阅读:448

最近在小程序中做到了头像上传这个功能,本来是挺简单的一个功能,但是这次是让我直接将图片上传到云储存,把返回的路径直接传给后台数据库存起来

emm这就很蛋疼了,一直都是处于你给我接口,我照着要求填数据就行了的那种模式,突然来一个这个操作

而且七牛的官方文档也有点难以理解,反正我是看了一下午,没看懂一堆参数,或者是初始化是怎么配置的

坑是踩的有点多吧,差点心态爆炸了,最后还是依靠的万能的百度解决的

记录一下,算是个总结吧

步骤:

  1.  token还是必须要的,调取后台接口,获取到上传图片到七牛的许可(token),以及一个图片的前缀地址(缺少关键的hash)

  2.  小程序配置uploadFile合法域名:

    反正我是把中国的3个地区域名全给配置上了(谁让小程序每月限制修改次数)

    https://upload.qiniup.com

    https://upload-z1.qiniup.com

    https://upload-z2.qiniup.com

  3.  这一步其实很简单了(但是别去用官方文档给的那个API)

    坑:官方API提供的qiniu.upload(xxx,xx)这个方法,说明也少,还有一堆参数,配置不知道怎么弄,原谅我的英语渣,但是还是觉得官方文档写的太烂

    正:所以说我们为什么不用微信自带的上传呢?(一开始我也在纠结)

      原文地址:https://blog.csdn.net/yibowanbo/article/details/80233107(再次感谢百度的强大,果然面向百度编程不是开玩笑的)

    wx.uploadFile({
        url: ‘https://upload-z2.qiniup.com‘,
        name: ‘file‘,
        filePath: this.data.headload,
        header: {
          "Content-Type": "multipart/form-data"
        },
        formData: {
          token: this.data.loadToken,
        },
        success: function (res) {
          let data = JSON.parse(res.data)
          console.log(res)
          // to do ...
        },
        fail: function (res) {
          console.log(res)
        }
      })

    其中filePath就是你要上传的文件的路径,formData中的token就是后台返回的token,填好之后,点击,搞定!

    上传成功就会返回给你信息,其中有个json对象,里面的hash对应的值就是前面图片缺失的hash,取出来,拼接上,完毕,图片上传搞定

  4.  最后把这个完整的图片地址再次传送给后台,一切完美解决

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!