微信小程序雲端解決方案教程一：文件上傳下載應用場景

首頁 > 官网开云 > 小程序常見問題

時間：2016-10-15 16:55:00

內容架構：

部署和運行
- 整體架構
- 1. 準備域名和證書
- 2. 雲主機和鏡像部署
- 3. 配置 HTTPS
- 4. 域名解析
- 5. 開通和配置 COS
- 6. 啟動小相冊示例 Node 服務
- 7. 微信小程序服務器配置
- 8. 啟動小相冊 Demo
主要功能實現
- 上傳圖片
- 獲取圖片列表
- 下載和保存圖片
- 刪除圖片

微信小程序提供了一套在微信上運行小程序的解決(jue) 方案，有比較完整的框架、組件以及 API，在這個(ge) 平台上麵的想象空間很大。

小相冊(ce) 是結合騰訊雲(yun) 對象存儲(chu) 服務（Cloud Object Service，簡稱COS）製作的一個(ge) 微信小程序示例。在代碼結構上包含如下兩(liang) 部分：

applet: 小相冊應用包代碼，可直接在微信開發者工具中作為項目打開
server: 搭建的 Node 服務端代碼，作為服務器和applet通信，提供 CGI 接口示例用於拉取 COS 圖片資源、上傳圖片到 COS、刪除 COS 圖片等。

小相冊(ce) 主要功能如下：

列出 COS 服務器中的圖片列表
點擊左上角上傳圖片圖標，可以調用相機拍照或從手機相冊選擇圖片，並將選中的圖片上傳到 COS 服務器中
輕按任意圖片，可進入全屏圖片預覽模式，並可左右滑動切換預覽圖片
長按任意圖片，可將其保存到本地，或從 COS 中刪除

部署和運行

拿到了本小程序源碼的朋友可以嚐試自己運行起來。

整體架構

1. 準備域名和證書

在微信小程序中，所有的網絡請求受到嚴(yan) 格限製，不滿足條件的域名和協議無法請求，具體(ti) 包括：

隻允許和在 MP 中配置好的域名進行通信，如果還沒有域名，需要注冊一個。
網絡請求必須走 HTTPS 協議，所以你還需要為你的域名申請一個證書。

域名注冊(ce) 好之後，可以登錄微信公眾(zhong) 平台配置通信域名了。

2. 雲主機和鏡像部署

小相冊(ce) 的服務器運行代碼和配置已經打包成騰訊雲(yun) CVM 鏡像，大家可以直接使用。

鏡像已包含所有小程序的服務器環境與(yu) 代碼，需要體(ti) 驗其它小程序的朋友無需重複部署

3. 配置 HTTPS

鏡像中已經部署了 nginx，需要在 /etc/nginx/conf.d 下修改配置中的域名、證書(shu) 、私鑰。

配置完成後，即可啟動 nginx。

nginx

4. 域名解析

我們(men) 還需要添加域名記錄解析到我們(men) 的雲(yun) 服務器上，這樣才可以使用域名進行 HTTPS 服務。

在騰訊雲(yun) 注冊(ce) 的域名，可以直接使用雲(yun) 解析控製台來添加主機記錄，直接選擇上麵購買(mai) 的 CVM。

解析生效後，我們(men) 在瀏覽器使用域名就可以進行 HTTPS 訪問。

5. 開通和配置 COS

小相冊(ce) 示例的圖片資源是存儲(chu) 在 COS 上的，要使用 COS 服務，需要登錄 COS 管理控製台，然後在其中完成以下操作：

開通 COS 服務分配得到唯一的APP ID
使用密鑰管理生成一對SecretID和SecretKey（用於調用 COS API）
在 Bucket 列表中創建公有讀私有寫訪問權限、CDN加速的 bucket（存儲圖片的目標容器）

6. 啟動小相冊示例 Node 服務

在鏡像中，小相冊(ce) 示例的 Node 服務代碼已部署在目錄/data/release/qcloud-applet-album下：

進入該目錄：

cd /data/release/qcloud-applet-album

在該目錄下有個(ge) 名為(wei) config.js的配置文件（如下所示），按注釋修改對應的 COS 配置：

module.exports = { // Node 監聽的端口號 port: '9993', ROUTE_BASE_PATH: '/applet', cosAppId: '填寫(xie) 開通 COS 時分配的 APP ID', cosSecretId: '填寫(xie) 密鑰 SecretID', cosSecretKey: '填寫(xie) 密鑰 SecretKey', cosFileBucket: '填寫(xie) 創建的公有讀私有寫(xie) 的bucket名稱',};

小相冊(ce) 示例使用pm2管理 Node 進程，執行以下命令啟動 node 服務：

pm2 start process.json

7. 微信小程序服務器配置

進入微信公眾(zhong) 平台管理後台設置服務器配置，配置類似如下設置：

注意：需要將 www.qcloud.la 設置為(wei) 上麵申請的域名，將 downloadFile 合法域名設置為(wei) 在 COS 管理控製台中自己創建的 bucket 的相應 CDN 加速訪問地址，如下圖所示：

8. 啟動小相冊 Demo

在微信開發者工具將小相冊(ce) 應用包源碼添加為(wei) 項目，並把源文件config.js中的通訊域名修改成上麵申請的域名。

然後點擊調試即可打開小相冊(ce) Demo開始體(ti) 驗。

這裏有個(ge) 問題。截止目前為(wei) 止，微信小程序提供的上傳(chuan) 和下載 API 無法在調試工具中正常工作，需要用手機微信掃碼預覽體(ti) 驗。

主要功能實現

上傳圖片

上傳(chuan) 圖片使用了微信小程序提供的wx.chooseImage(OBJECT)獲取需要上傳(chuan) 的文件路徑，然後調用上傳(chuan) 文件接口wx.request(OBJECT)發送 HTTPS POST 請求到自己指定的後台服務器。和傳(chuan) 統表單文件上傳(chuan) 一樣，請求頭Content-Type也是multipart/form-data。後台服務器收到請求後，使用 npm 模塊 multiparty 解析 multipart/form-data 請求，將解析後的數據保存為(wei) 指定目錄下的臨(lin) 時文件。拿到臨(lin) 時文件的路徑後，就可直接調用 COS SDK 提供的文件上傳(chuan) API 進行圖片存儲(chu) ，最後得到圖片的存儲(chu) 路徑及訪問地址（存儲(chu) 的圖片路徑也可以直接在 COS 管理控製台看到）。