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

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

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

原文地址:https://www.cnblogs.com/weilaiz/p/9670189.html

时间: 2024-08-29 16:59:45

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

小程序上传图片到七牛

小程序上传图片非常简单,利用好2个API: wx.chooseImage wx.uploadFile /** * 上传图片 */ chooseImageUpload() { var that = this; wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { that.tempFilePaths = r

如何让微信小程序快速接入七牛云

如果你确定用七牛运行小程序的话,给大家分享一个九折优惠码:61d1fd4d1 月 9 日 微信小程序正式发布,小程序终于揭开了它神秘的面纱,开发者对小程序的追捧更是热度不减.从小程序的热门应用场景来看,大概可以分为两大类,一类是低使用频率的 App,如金融类的银行或保险公司 App,O2O 类的上门做饭.家政 App:另一类是虽然使用频率高但是功能简单的 App,如工具类的天气.快递查询,富媒体类的资讯 App 等.那么,谁将成为小程序的大赢家?要打造独角兽级别的微信小程序,开发者除了要注重小程

onethink 后台编辑器 上传图片使用七牛驱动云存储

首先感谢这篇文章作者: http://blog.csdn.net/weishiyong/article/details/40060551 写的不是很详细,而且没有颜色标示.和我当前使用的OT1.0版本代码又不一样.所以参考参考思路还是可以的. 经过2小时的调试和修改已经成功实现. 下面把过程记录下来. 首先修改全局Config文件:  'PICTURE_UPLOAD_DRIVER'=>'QINIU', //把原来的LOCAL改成七牛 修改七牛配置文件  'UPLOAD_QINIU_CONFIG'

UEditor上传图片到七牛C#(后端实现)

由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七牛云 在我看来无非两种方式 1 前端表单或ajax异步提交请求到七牛服务器 ,当然此时也需要经过后端获取相应的  token (图片->七牛服务器) 2 直接后端代码请求 七牛服务器 ,官方有各版本语言的sdk 提供 ,可提高开发效率 ,降低开发难度  (图片->自己服务器->七牛服务器)

koa-ueditor上传图片到七牛

问题描述:服务器系统架构采用的是koa(并非koa2),客户端富文本编辑器采用的是百度的ueditor控件.现在需要ueditor支持将图片直接上传到七牛云. 前提:百度的ueditor需要在本地配置为可用,图片上传相关的配置可以参考官方文档的描述.由于服务器用的node.js,因此ueditor目录下我们只需要保留nodejs目录,其它部分如php,asp.net等都可以删掉.然后根据自己服务器的环境适当修改config.json文件中的配置. 现有方案:现有npm和github上找到的库有很

微信小程序上传图片到服务器实例

这一篇主要说头像 上传,以及修改保存的功能.本章节主要用的知识点有 1. wx.chooseImage 从本地相册选择图片或使用相机拍照. 2.wx.uploadFile 将本地资源上传到服务器. 3. 修改原来的小程序头像并保存,调用后台接口修改操作  第一步:我们要获取本地图片,官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxchooseimageobject 我这里也贴出来了,不够

微信小程序上传图片到COS腾讯云

功能需求:用户可以在评论中上传图片,图片保存到腾讯云COS上. 实现方法,微信小程序需要往后台传一个代表文件的参数file代表文件,借助MultipartFile获得文件的路径和文件名等信息. 关键实现代码: @RequestMapping(value = "/plugins/fileServer/fileservice/sales/admin", method = RequestMethod.POST) void postAdmin(@RequestParam(value = &qu

c#后端 小程序上传图片

c#后端: /// <summary> /// 上传图片 /// </summary> /// <returns></returns> [HttpPost] public ResultData uploadImage() { ResultData result = new ResultData(); try { string path = "/tmp/"; HttpPostedFile file = System.Web.HttpCont

使用微信 SDK 上传图片到七牛

总体思路是:在微信下选好图片后将图片上传到微信服务器,在后端使用微信服务器返回的图片 serverId 加上调用接口的 ApiTicket 通过七牛的 fetch 接口向微信服务器下载多媒体文件的接口请求图片的二进制流,然后保存至自己七牛账号内的特定 bucket.大致过程如下: 1.调用微信 chooseImage 接口,成功后调用 uploadImage 接口 wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], s