網(wǎng)盤大家都不陌生，那么能不能動手寫一個呢，在之前這幾乎是不可能完成的任務(wù)，但是現(xiàn)在互聯(lián)網(wǎng)工具“輪子”越來越多，動手寫一個網(wǎng)盤幾乎不是什么難事了。借著小程序這股東風(fēng)，我們就用小程序來完成一起專屬的網(wǎng)盤

一、準(zhǔn)備工作1、小程序帳戶，小程序后臺需要知道是哪個用戶做了上傳操作。沒有小程序帳戶是無法完成今天的任務(wù)的；建議后臺多綁定幾個開發(fā)者；

2、重點項，申請一個七牛帳戶。所有的內(nèi)容都保存在七牛上。目前10G是免費的，基本上能滿足我們?nèi)粘５拈_發(fā)，要知道蘋果的iCloud才給5G。不知道DIY網(wǎng)盤出來了，會不會對七牛產(chǎn)生影響；

3、到七牛后臺獲取Access_Key和Secret_Key這個是很關(guān)鍵的一步；

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

解釋一下，為什么需要uptoken?？梢岳斫鉃樽錾蟼鞑僮鞯目诹钜粯樱@樣可以避免一些誤操作或一些非法操作。uptoken當(dāng)然還有其它的生成方式，感興趣的同學(xué)可以自己再研究；

5、創(chuàng)建一個空間，選擇公開的空間，選擇一個地區(qū)；

要注意，選擇不同的空間將來訪問地址不同，同時把當(dāng)前空間的下載地址和訪問地址配置到微信小程序后臺，上傳文件域名、下載文件域名；

這里簡單舉例：選擇的華北區(qū)，那么空間地址就是 https://up.qbox.me
空間訪問地址是：https://XXXXXX.bkt.clouddn.com XX部分根據(jù)不同用戶則不同

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

注:這里使用了可能是全網(wǎng)最輕便的網(wǎng)絡(luò)快遞手 https://databank.name

準(zhǔn)備工作就先到這，羅列一下開發(fā)中要用的空間名（bucketname）、上傳憑證（uptoken）、空間訪問地址、工具js包

二、開干
1、創(chuàng)建項目，AppID一定要填寫。否則無法體驗，無法調(diào)試；

2、編寫頁面，這個例子中選擇本地的圖片然后上傳到七牛網(wǎng)絡(luò)中，這么做主要是考慮很多用戶沒有自己的服務(wù)器，如果有自己的服務(wù)器，那么就可以傳到自己的服務(wù)端，不過在服務(wù)器上還是需要一個接收的程序，寫到本地的硬盤上。現(xiàn)在使用七牛就可以用最簡單的方式完成。只需要簡單的配置就可以了。這樣可以重點關(guān)注小程序部分；

上傳文件

按鈕綁定了一個事件，發(fā)起選擇圖片然后上傳。didPressChooesImage 這個函數(shù)要寫在當(dāng)前頁面對應(yīng)的JS中。并且要在Page()函數(shù)中注冊

didPressChooesImage()函數(shù)主要實現(xiàn)選擇本地的一張照片，然后再調(diào)用七牛工具包上傳到申請的網(wǎng)絡(luò)空間中

3、上傳完之后。把網(wǎng)絡(luò)上的圖片在本地顯示

這里要說明的是src是來自頁面中定義的數(shù)據(jù)，上傳操作之后會自動完成賦值操作。

mode 這里順道提一下，是圖片裁剪、縮放模式一共有13種，4種縮放，9種是裁剪模式。

不同于網(wǎng)上的其它內(nèi)容，純粹的講組件如何的使用，講的是是很細(xì)，但是過后就忘記，希望我們的課程緊扣各種案例，學(xué)一個會一個。

4、上傳成功之后給出一些提示

實際顯示效果

5、項目成品展示，哪個頁面需要上傳功能就引入七牛的js包

實際效果圖如下

6、好了本地完成，打包上傳，要不要上線，自己來定好了。希望能在這個基礎(chǔ)上再進一步的優(yōu)化。上傳的文件我們來七牛后臺查看一下。

好了項目就先說到這里好了。項目整體結(jié)構(gòu)

知識點梳理

1、頁面數(shù)據(jù)動態(tài)賦值 imageObject: {}；

2、本地相機選擇或拍照 wx.chooseImage(OBJECT)；

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

4、自定義事件綁定。