七牛传图插件说明文档
GitHub项目地址：https://github.com/oubingbing/qiniu-upload
1.目前七牛传图插件信息
AppId：wx00caa212d6710dcb
版本号：1.3.0
2.具体使用方法
2.1 配置app.json和使用页面的***.json
//app.json{ "pages": [ "pages/index/index" ], "plugins": { //配置插件 "myPlugin": { "version": "1.0.0", "provider": "wx00caa212d6710dcb" //appId } }} |
***.json{ "usingComponents": { "upload": "plugin://myPlugin/upload" //引入插件 }} |
2.2 在页面的WXML文件中添加标签
<upload icon-info="{{icon}}" //上传图标信息，包括图标的宽高 qiniu-info="{{qiniu}}" //七牛信息，包括七牛授权token、七牛存储区域、七牛域名以及可以一次性选择图片的最大数量 bind:success="uploadSuccess" //上传成功回调 bind:delete="deleteSuccess" //删除成功回调 bind:error="uploadError"/> //上传错误回调 |
2.3 JS文件中处理传入插件数据
var plugin = requirePlugin("myPlugin")const token = 'dJVFK8ibSzHKWhcVOupqzn22EKJ9QXqjLIqqDsqn:FHJcjNuTs5HtSbsUQveZU3vLGcw=:eyJzY29wZSI6InNjaG9vbCIsImRlYWRsaW5lIjoxNTM3ODczODE0fQ==';Page({ data:{ test:"plugin", icon:{ width:"130rpx",//图片和图标的宽
path:"",//选择图片icon的URL地址，必须是网络地址，不能是本地地址，如果不填则选默认图标, showImage:true//是否显示上传后的图片 }, qiniu:{ uploadNumber:4,//一次性选择图片的最大限制 region: "SCN",//ECN, SCN, NCN, NA，您的七牛存储区域 token: token,//七牛上传token凭证，需您在服务器获取，然后自行维护这个token的有效期 domain: "http://image.kucaroom.com",//七牛域名
returnAllImage:true,//是否返回上传图片的数组,false上传一个返回一个 } }, onLoad: function() { }, /** * 上传成功后的回调,返回已上传的图片数组 */ uploadSuccess:function(uploadImage){ console.log("外部获取到上传照片：" + JSON.stringify(uploadImage.detail)); }, /** * 删除图片的回调，返回已上传的图片数组 */ deleteSuccess: function (uploadImage) { console.log("外部获取到删除后的照片：" + JSON.stringify(uploadImage.detail)); }, /** * 上传图片出错的回调 */ uploadError:function(res){ console.log("上传出错："+res); }}) |
参数说明
上传成功返回参数
[ { "localPath": "http://tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.VzUQ2ebaMb87c6609a10aab7698d8645216baafb307e.jpg", "uploadResult": { "hash": "Fia6Y7gP4gXuaEsTfk5D9rslFWEz", "key": "tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.VzUQ2ebaMb87c6609a10aab7698d8645216baafb307e.jpg", "imageURL": "http://image.kucaroom.com/tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.VzUQ2ebaMb87c6609a10aab7698d8645216baafb307e.jpg" } }, { "localPath": "http://tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.2sYa1Iz3HXvM983982ba2e07d25e79212b11b8c75742.jpg", "uploadResult": { "hash": "FmNPIb1IJ9xraRdl26zXAjjyTjfz", "key": "tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.2sYa1Iz3HXvM983982ba2e07d25e79212b11b8c75742.jpg", "imageURL": "http://image.kucaroom.com/tmp/wx00caa212d6710dcb.o6zAJs3oh85Zb1lJE8oWix57vny0.2sYa1Iz3HXvM983982ba2e07d25e79212b11b8c75742.jpg" } }] |
localPath：上传图片的本地路径
uploadResult：上传七牛后成功返回的参数
上传失败后返回的参数
{error: "bad token", imageURL: "http://image.kucaroom.com/undefined"} |
3.效果图
mark
上传👁
这不能上传本地图片？针对什么需求的？
mark
mark
mark
icon:{"width":"130rpx",//图片和图标的宽"height":"130rpx"//图片和图标的高},这样是不是会等比截取图片大小
mark
mark
mark