收藏
评论

七牛传图,上传图片至七牛云

七牛传图插件说明文档


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.效果图


 


最后一次编辑于  2018-12-28
赞 2
收藏

20 个评论

  • 千金大小姐
    千金大小姐
    2019-03-01

    mark

    2019-03-01
    赞同
    回复
  • 🥬goodBoy
    🥬goodBoy
    2019-02-25

    上传👁

    2019-02-25
    赞同
    回复
  • 莫句
    莫句
    2019-02-19

    这不能上传本地图片?针对什么需求的?

    2019-02-19
    赞同
    回复
  •  乐仔℡¹³⁹³³⁸⁸³⁶³⁷
     乐仔℡¹³⁹³³⁸⁸³⁶³⁷
    2019-02-09

    mark

    2019-02-09
    赞同
    回复
  • 神经蛙
    神经蛙
    2018-11-29

    mark

    2018-11-29
    赞同
    回复
  • 话题终结者一号
    话题终结者一号
    2018-11-21

    mark

    2018-11-21
    赞同
    回复
  • Silence
    Silence
    2018-11-08

    icon:{

     

          "width":"130rpx",//图片和图标的宽

     

          "height""130rpx"//图片和图标的高

     

        },

    这样是不是会等比截取图片大小

    2018-11-08
    赞同
    回复
  • 我彳亍我秀
    我彳亍我秀
    2018-11-04

    mark

    2018-11-04
    赞同
    回复
  • 聪明的脉冲黄桃
    聪明的脉冲黄桃
    2018-11-02

    mark

    2018-11-02
    赞同
    回复
  • 空瓶子
    空瓶子
    2018-10-29

    mark


    2018-10-29
    赞同
    回复

正在加载...

登录 后发表内容