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

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

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

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

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

解釋一下，為什么需要uptoken。可以理解為做上傳操作的口令一樣，這樣可以避免一些誤操作或一些非法操作。uptoken當(dāng)然還有其它的生成方式，感興趣的同學(xué)可以自己再研究；

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

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

這里簡單舉例：選擇的華北區(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)建項(xiàng)目，AppID一定要填寫。否則無法體驗(yàn)，無法調(diào)試；

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

上傳文件

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

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

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

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

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

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

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

實(shí)際顯示效果

5、項(xiàng)目成品展示，哪個(gè)頁面需要上傳功能就引入七牛的js包

實(shí)際效果圖如下

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

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

知識(shí)點(diǎn)梳理

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

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

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

4、自定義事件綁定。