微信小程序云端解决方案教程一：文件上传下载应用场景

内容架构：

部署和运转

整体架构

1. 准备工作域名和证书

2. 云主机和镜像部署

3. 布局 HTTPS

4. 域名解析

5. 启用和布局 COS

6. 启动大书签示例 Node 服务

7. 微信小程序服务器布局

8. 启动大书签 Demo

主要功能同时实现

上载图片

以获取图片列表

浏览和留存图片

删掉图片

微信小程序提供更多了一套在微信上运转小程序的解决方案，存有比较完备的框架、组件以及 API，在这个平台上面的想象空间非常大。

大书签就是融合腾讯云对象存储服务（Cloud Object Service，缩写COS）制作的一个微信小程序示例。在代码结构上涵盖如下两部分：

applet: 大书签应用领域纸盒代码，可以轻易在微信开发者工具中做为项目关上

server: 构建的 Node 服务端代码，做为服务器和applet通信，提供更多 CGI USB示例用作拉取 COS 图片资源、上载图片至 COS、删掉 COS 图片等。

大书签主要功能如下：

列举 COS 服务器中的图片列表

页面左上角上载图片图标，可以调用相机偷拍或从手机书签挑选图片，并将选上的图片上传至 COS 服务器中

轻按任一图片，可以步入全屏图片预览模式，并可以左右滑动转换预览图片

短按任一图片，可以将其留存至本地，或从 COS 中删掉

部署和运转

领到利斯勒小程序源码的朋友可以尝试自己运转出来。

整体架构

1. 准备工作域名和证书

在微信小程序中，所有的网络命令受严苛管制，不满足条件的域名和协议无法命令，具体内容包含：

只容许和在 MP 中布局不好的域名展开通信，如果还没域名，须要登记注册一个。

网络命令必须跑 HTTPS 协议，所以你还须要为你的域名提出申请一个证书。

域名登记注册不好之后，可以登入微信公众平台布局通信域名了。

2. 云主机和镜像部署

大书签的服务器运转代码和布局已经装箱成腾讯云 CVM 镜像，大家可以轻易采用。

镜像已涵盖所有小程序的服务器环境与代码，须要体验其它小程序的朋友无须重复部署

3. 布局 HTTPS

镜像中已经部署了 nginx，须要在 /etc/nginx/conf.d 下修正布局中的域名、证书、私钥。

布局顺利完成后，即可启动 nginx。

nginx

4. 域名解析

我们还须要嵌入域名记录解析至我们的云服务器上，这样才可以采用域名展开 HTTPS 服务。

在腾讯云登记注册的域名，可以轻易采用云解析控制器去嵌入主机记录，轻易挑选上面出售的 CVM。

解析生效后，我们在浏览器采用域名就可以展开 HTTPS 出访。

5. 启用和布局 COS

大书签示例的图片资源就是存储在 COS 上的，必须采用 COS 服务，须要登入 COS 管理控制器，然后在其中顺利完成以下操作方式：

启用 COS 服务分配获得唯一的APP ID

采用密钥管理分解成一对SecretID和SecretKey（用作调用 COS API）

在 Bucket 列表中建立公有念私有写访问权限、CDN快速的 bucket（存储图片的目标容器）

6. 启动大书签示例 Node 服务

在镜像中，大书签示例的 Node 服务代码已部署在目录/data/release/qcloud-applet-album之下：

步入该目录：

cd /data/release/qcloud-applet-album

在该目录下有个名叫config.js的配置文件（如下右图），按注解修正对应的 COS 布局：

module.exports = { // Node 监听的端口号 port: '9993', ROUTE_BASE_PATH: '/applet', cosAppId: '核对启用 COS 时分配的 APP ID', cosSecretId: '核对密钥 SecretID', cosSecretKey: '核对密钥 SecretKey', cosFileBucket: '核对建立的公有念私有写下的bucket名称',};

大书签示例采用pm2管理 Node 进程，继续执行以下命令启动 node 服务：

pm2 start process.json

7. 微信小程序服务器布局

步入微信公众平台管理后台设置服务器布局，布局相似如下设置：

特别注意：须要将 www.qcloud.la 设置为上面提出申请的域名，将 downloadFile 合法域名设置为在 COS 管理控制器中自己建立的 bucket 的适当 CDN 快速出访地址，如下图右图：

8. 启动大书签 Demo

在微信开发者工具将大书签应用领域纸盒源码嵌入为项目，并把源文件config.js中的通讯域名修正成上面提出申请的域名。

然后页面调试即可关上大书签Demo已经开始体验。

这里有个问题。截至目前为止，微信小程序提供更多的上载和浏览 API 无法在调试工具中正常工作，须要用手机微信扫码预览体验。

主要功能同时实现

上载图片

上载图片采用了微信小程序提供更多的wx.chooseImage(OBJECT)以获取须要上载的文件路径，然后调用上载文件USBwx.request(OBJECT)传送 HTTPS POST 命令至自己选定的后台服务器。和传统表单文件上载一样，命令头Content-Type也就是multipart/form-data。后台服务器接到命令后，采用 npm 模块 multiparty 解析 multipart/form-data 命令，将解析后的数据留存为选定目录下的临时文件。领到临时文件的路径后，就可以轻易调用 COS SDK 提供更多的文件上载 API 展开图片存储，最后获得图片的存储路径及出访地址（存储的图片路径也可以轻易在 COS 管理控制器看见）。

以获取图片列表

调用列出目录下文件&目录 API可以以获取至在 COS 服务端选定 bucket 和该 bucket 选定路径下存储的图片。

浏览和留存图片

选定图片的出访地址，然后调用微信小程序提供更多的wx.downloadFile(OBJECT)和wx.saveFile(OBJECT)USB可以轻易将图片下载和留存本地。这里必须特别注意图片出访地址的域名须要和服务器布局的 dowmloadFile 合法域名一致，否则无法浏览。

删掉图片

删掉图片也十分直观，轻易调用文件删掉 API 就可以将存储在 COS 服务端的图片删掉。