1.

为什么80%的码农都做不了架构师？

2.

相信小程序开发者在开发过程中都会遇到上传代码包遇到大小限制这个问题，因为微信现在规定代码不能超过2MB大小，但我们实际开发过程中难免会有业务需求要使用一些图片和视频等媒体文件，这样的话会导致上传代码包大小超过限制无法发布，所以开发者需要将需要的一些媒体数据上传到云端进行存储，这样就解决了这样一个小问题了。当然也可以使用微信推出的另一个技术分包加载也许也能解决这个问题，这里不细说了，先分享下前台如何接入七牛吧。

3.

1、注册七牛七牛账号，实名认证之后，找到自己个人中心的AccessKey/SecretKey在后台配置这两个参数，因为需要前端调用后台接口，后台返回给前端七牛token之后，拿到token令牌才可以完成上传操作这是必须的。

4.

2、下载七牛提供的sdk文件qiniuUploader.js导入到项目中，并在使用它的页面上引入js文件。

5.

下载地址：https://developer.qiniu.com/sdk#community-sdk

constqiniuUploaderrequire("../../utils/qiniuUploader");6.

3、小程序配置域名信息

7.

登录微信公众平台--设置--开发设置--服务器域名

8.

4、以上都准备好就可以完成上传操作了，直接上代码

9.

初始化七牛参数

constqiniuUploaderrequire("../../utils/qiniuUploader");constappgetApp()varurlapp.globalData.url//初始化七牛相关参数functioninitQiniu(res){varoptions{region:'SCN',//华南//ECN,SCN,NCN,NA,ASG，分别对应七牛的：华东，华南，华北，北美，新加坡5个区域uptoken:res.uptoken,//uptokenURL:'https://[yourserver.com]/api/uptoken',//uptoken:'xxxx',domain:'bzkdlkaf.bkt.clouddn.com',//bucket域名，下载资源时用到。如果设置，会在successcallback的res参数加上可以直接使用的ImageURL字段。否则需要自己拼接。shouldUseQiniuFileName:false};qiniuUploader.init(options);}10.

获得七牛token在后台别忘了引入相应的七牛工具包

importcom.qiniu.util.Auth;@Controller@RequestMapping(value"/qiniu")publicclassQiniuToken{//获取token@RequestMapping(value"/getToken")public@ResponseBodyMapString,StringgetToken()throwsIOException{StringaccessKey"xxx";StringsecretKey"xxx";Stringbucket"xxx";AuthauthAuth.create(accessKey,secretKey);StringupTokenauth.uploadToken(bucket);MapString,StringmapnewHashMapString,String();map.put("uptoken",upToken);returnmap;}}11.

上传操作，比如此时我要上传一张logo图片，逻辑是这样的：首先请求后台拿到token之后，初始化七牛，调用七牛方法，传入图片临时路径上传到七牛，最后把这个完整的图片地址再次传送给后台，一切完美解决。

/***表单提交*/formSubmit:function(e){varcompanyLogoimge.detail.value.companyLogoimg//存logowx.request({url:url+"qiniu/getToken",data:{},success:function(result){console.log("初始化七牛返回token:",result);//token:后端返回的上传验证信息//存logoinitQiniu(result.data);qiniuUploader.upload(companyLogoimg,(res){//对象存储中外链默认域名http://p2mksxx.bkt.clouddn.com/varlogo"http://p2mksxx.bkt.clouddn.com/"+res.key//最后把这个完整的图片地址再次传送给后台//存form表单公司详情数据wx.request({url:url+"wedoCompany/save",method:'POST',//OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECTheader:{'Content-Type':'application/x-www-form-urlencoded;charsetUTF-8'},data:{id:id,logo:logo,},success:function(res){wx.showModal({title:'提示',showCancel:false,confirmText:"我知道了",content:'提交成功',success:function(res){//wx.navigateBack({//delta:1//})}})}})},(error){console.error('error:'+JSON.stringify(error));});}})},12.

根据以上步骤可以简单实现了前端上传图片到七牛云，开发中可以根据自己业务需求进行开发，代码虽low就当抛砖引玉分享给大家，期待你有更好的idea一起分享。

13.

水平有限，若有问题请留言交流！

14.

互相学习，共同进步：）转载请注明出处谢谢！