七牛传图,上传图片至七牛云
七牛传图插件说明文档 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"[代码][代码],[代码][代码]//图片和图标的宽[代码] [代码] [代码][代码]height[代码][代码]: [代码][代码]"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.效果图 [图片]