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

一、準備工作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、編寫頁面，這個例子中選擇本地的圖片然后上傳到七牛網絡中，這么做主要是考慮很多用戶沒有自己的服務器，如果有自己的服務器，那么就可以傳到自己的服務端，不過在服務器上還是需要一個接收的程序，寫到本地的硬盤上。現在使用七牛就可以用最簡單的方式完成。只需要簡單的配置就可以了。這樣可以重點關注小程序部分；

上傳文件

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

didPressChooesImage()函數主要實現選擇本地的一張照片，然后再調用七牛工具包上傳到申請的網絡空間中

3、上傳完之后。把網絡上的圖片在本地顯示

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

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

不同于網上的其它內容，純粹的講組件如何的使用，講的是是很細，但是過后就忘記，希望我們的課程緊扣各種案例，學一個會一個。

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

實際顯示效果

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

實際效果圖如下

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

好了項目就先說到這里好了。項目整體結構

知識點梳理

1、頁面數據動態賦值 imageObject: {}；

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

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

4、自定義事件綁定。