小程序案例-动手实现专属网盘

网盘大家都不陌生，那么能不能动手写一个呢，在之前这几乎是不可能完成的任务，但是现在互联网工具“轮子”越来越多，动手写一个网盘几乎不是什么难事了。借着小程序这股东风，我们就用小程序来完成一起专属的网盘

一、准备工作
1、小程序帐户，小程序后台需要知道是哪个用户做了上传操作。没有小程序帐户是无法完成今天的任务的；建议后台多绑定几个开发者；

2、重点项，申请一个七牛帐户。所有的内容都保存在七牛上。目前10G是免费的，基本上能满足我们日常的开发，要知道苹果的iCloud才给5G。不知道DIY网盘出来了，会不会对七牛产生影响；

3、到七牛后台获取Access_Key和Secret_Key这个是很关键的一步；

4、生成上传文件需要的uptoken, https://a86.cn/7niu4uptoken.jsp

解释一下，为什么需要uptoken。可以理解为做上传操作的口令一样，这样可以避免一些误操作或一些非法操作。uptoken当然还有其它的生成方式，感兴趣的同学可以自己再研究；

5、创建一个空间，选择公开的空间，选择一个地区；

要注意，选择不同的空间将来访问地址不同，同时把当前空间的下载地址和访问地址配置到微信小程序后台，上传文件域名、下载文件域名；

这里简单举例：选择的华北区，那么空间地址就是 https://up.qbox.me
空间访问地址是：https://XXXXXX.bkt.clouddn.com XX部分根据不同用户则不同

6、下载上传到七牛的工具js包（qiniuUploader.js） http://w.url.cn/s/AKwjtFn 可以到这里下载，或到七牛官方下载

注:这里使用了可能是全网最轻便的网络快递手 https://databank.name

准备工作就先到这，罗列一下开发中要用的
空间名（bucketname）、上传凭证（uptoken）、空间访问地址、工具js包

二、开干
1、创建项目，AppID一定要填写。否则无法体验，无法调试；

2、编写页面，这个例子中选择本地的图片然后上传到七牛网络中，这么做主要是考虑很多用户没有自己的服务器，如果有自己的服务器，那么就可以传到自己的服务端，不过在服务器上还是需要一个接收的程序，写到本地的硬盘上。现在使用七牛就可以用最简单的方式完成。只需要简单的配置就可以了。这样可以重点关注小程序部分；

<button bindtap='didPressChooesImage'>上传文件</button>

按钮绑定了一个事件，发起选择图片然后上传。didPressChooesImage 这个函数要写在当前页面对应的JS中。并且要在Page()函数中注册

didPressChooesImage()函数主要实现选择本地的一张照片，然后再调用七牛工具包上传到申请的网络空间中

3、上传完之后。把网络上的图片在本地显示

<image class="image" src="{{imageObject.imageURL}}" mode="aspectFit"></image>

这里要说明的是src是来自页面中定义的数据，上传操作之后会自动完成赋值操作。

mode 这里顺道提一下，是图片裁剪、缩放模式一共有13种，4种缩放，9种是裁剪模式。

不同于网上的其它内容，纯粹的讲组件如何的使用，讲的是是很细，但是过后就忘记，希望我们的课程紧扣各种案例，学一个会一个。

4、上传成功之后给出一些提示

实际显示效果

5、项目成品展示，哪个页面需要上传功能就引入七牛的js包

实际效果图如下

6、好了本地完成，打包上传，要不要上线，自己来定好了。希望能在这个基础上再进一步的优化。上传的文件我们来七牛后台查看一下。

好了项目就先说到这里好了。项目整体结构

知识点梳理

1、页面数据动态赋值 imageObject: {}；

2、本地相机选择或拍照 wx.chooseImage(OBJECT)；

3、交互反馈 wx.showToast(OBJECT)；

4、自定义事件绑定。