找回密码
 立即注册

QQ登录

只需一步,快速开始

[微信] 七牛传图,上传图片至七牛云服务

[复制链接]
查看: 1178|回复: 2
最佳答案
0 

13

主题

31

帖子

2040

积分

专家路上

积分
2040
 楼主| 发表于 2018-9-28 10:44:08 | 显示全部楼层 |阅读模式
七牛传图只需要简单配置,提供七牛授权token等信息就可以将图片上传到七牛云服务了,简单快捷不需要你重新写一套上传图片的逻辑,支持上传多张和单张,根据你的需求配置即可。

七牛传图插件说明文档

GitHub项目地址:https://github.com/oubingbing/qiniu-upload

1.目前七牛传图插件信息

AppId:wx00caa212d6710dcb

版本号:1.0.0

2.具体使用方法

2.1 配置app.json和使用页面的***.json



  1. <div>//app.json</div><div>{</div><div>  "pages": [</div><div>    "pages/index/index"</div><div>  ],</div><div>  "plugins": { //配置插件</div><div>    "myPlugin": {</div><div>      "version": "1.0.0",</div><div>      "provider": "wx00caa212d6710dcb" //appId</div><div>    }</div><div>  }</div><div>}</div>
复制代码

  1. <div>***.json</div><div>{</div><div>  "usingComponents": {</div><div>    "upload": "plugin://myPlugin/upload" //引入插件</div><div>  }</div><div>}</div>
复制代码




2.2 在页面的WXML文件中添加标签

  1. <div><upload icon-info="{{icon}}" //上传图标信息,包括图标的宽高</div><div>        qiniu-info="{{qiniu}}"  //七牛信息,包括七牛授权token、七牛存储区域、七牛域名以及可以一次性选择图片的最大数量</div><div>        bind:success="uploadSuccess" //上传成功回调 </div><div>        bind:delete="deleteSuccess" //删除成功回调</div><div>        bind:error="uploadError"/> //上传错误回调</div>
复制代码




2.3 JS文件中处理传入插件数据

  1. <div>var plugin = requirePlugin("myPlugin")</div><div>const token = 'dJVFK8ibSzHKWhcVOupqzn22EKJ9QXqjLIqqDsqn:FHJcjNuTs5HtSbsUQveZU3vLGcw=:eyJzY29wZSI6InNjaG9vbCIsImRlYWRsaW5lIjoxNTM3ODczODE0fQ==';</div><div>
  2. </div><div>Page({</div><div>  data:{</div><div>    test:"plugin",</div><div>    icon:{</div><div>      "width":"130rpx",//图片和图标的宽</div><div>      "height": "130rpx"//图片和图标的高</div><div>    },</div><div>    qiniu:{</div><div>      uploadNumber:4,//一次性选择图片的最大限制</div><div>      region: "SCN",//ECN, SCN, NCN, NA,您的七牛存储区域</div><div>      token: token,//七牛上传token凭证,需您在服务器获取,然后自行维护这个token的有效期</div><div>      domain: "http://image.kucaroom.com"//七牛域名</div><div>    }</div><div>  },</div><div>  </div><div>  onLoad: function() {</div><div>
  3. </div><div>  },</div><div>  </div><div>  /**</div><div>   * 上传成功后的回调,返回已上传的图片数组</div><div>   */</div><div>  uploadSuccess:function(uploadImage){</div><div>    console.log("外部获取到上传照片:" + JSON.stringify(uploadImage.detail));</div><div>  },</div><div>
  4. </div><div>  /**</div><div>   * 删除图片的回调,返回已上传的图片数组</div><div>   */</div><div>  deleteSuccess: function (uploadImage) {</div><div>    console.log("外部获取到删除后的照片:" + JSON.stringify(uploadImage.detail));</div><div>  },</div><div>
  5. </div><div>  /**</div><div>   * 上传图片出错的回调</div><div>   */</div><div>  uploadError:function(res){</div><div>    console.log("上传出错:"+res);</div><div>  }</div><div>})</div><div></div>
复制代码



参数说明

上传成功返回参数

  1. <div>[</div><div>    {</div><div>    <span style="white-space:pre">        </span>"localPath": "http://tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.VzUQ2ebaMb87c6609a10aab7698d8645216baafb307e.jpg",</div><div>    <span style="white-space:pre">        </span>"uploadResult": {</div><div>    <span style="white-space:pre">                </span>"hash": "Fia6Y7gP4gXuaEsTfk5D9rslFWEz",</div><div>    <span style="white-space:pre">                </span>"key": "tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.VzUQ2ebaMb87c6609a10aab7698d8645216baafb307e.jpg",</div><div>    <span style="white-space:pre">                </span>"imageURL": "http://image.kucaroom.com/tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.VzUQ2ebaMb87c6609a10aab7698d8645216baafb307e.jpg"</div><div>    <span style="white-space:pre">        </span>}</div><div>    }, {</div><div>    <span style="white-space:pre">        </span>"localPath": "http://tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.2sYa1Iz3HXvM983982ba2e07d25e79212b11b8c75742.jpg",</div><div>    <span style="white-space:pre">        </span>"uploadResult": {</div><div>    <span style="white-space:pre">                </span>"hash": "FmNPIb1IJ9xraRdl26zXAjjyTjfz",</div><div>    <span style="white-space:pre">                </span>"key": "tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.2sYa1Iz3HXvM983982ba2e07d25e79212b11b8c75742.jpg",</div><div>    <span style="white-space:pre">                </span>"imageURL": "http://image.kucaroom.com/tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.2sYa1Iz3HXvM983982ba2e07d25e79212b11b8c75742.jpg"</div><div>    <span style="white-space:pre">        </span>}</div><div>    }</div><div>]</div><div></div>
复制代码



  1. <div>localPath:上传图片的本地路径</div><div>uploadResult:上传七牛后成功返回的参数</div><div></div>
复制代码



上传失败后返回的参数

  1. {error: "bad token", imageURL: "http://image.kucaroom.com/undefined"}
复制代码


3.效果图




微信图片_20180928100027.jpg
回复

使用道具 举报

最佳答案
0 

1

主题

1392

帖子

1万

积分

S2

积分
14583
发表于 2018-9-29 08:15:51 | 显示全部楼层
问题出到10个G的流量不够用 上个月跑了90个G
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

372

帖子

1万

积分

S2

积分
13453
发表于 2018-10-18 17:20:45 | 显示全部楼层
哈哈,楼主不错
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com