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

Posted 2021-01-07 weilaiz

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

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.  最后把这个完整的图片地址再次传送给后台，一切完美解决