找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1221

所属分类: 微信开发 微信小程序开发资源

微信小程序、微信小程序开发,提供各类小程序开发工具及开发教程。

[开发教程] 微信小程序开发之文件上传下载应用场景(附Demo源码)

  [复制链接]
查看: 5920|回复: 155
最佳答案
0 

2

主题

4

帖子

45

积分

新人求带

积分
45
 楼主| 发表于 2016-9-27 10:10:29 | 显示全部楼层 |阅读模式
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持。

目录:
    部署和运行
        整体架构
        1. 准备域名和证书
        2. 云主机和镜像部署
        3. 配置 HTTPS
        4. 域名解析
        5. 开通和配置 COS
        6. 启动小相册示例 Node 服务
        7. 微信小程序服务器配置
        8. 启动小相册 Demo
    主要功能实现
        上传图片
        获取图片列表
        下载和保存图片
        删除图片

微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 API,在这个平台上面的想象空间很大。

小相册是结合腾讯云对象存储服务(Cloud Object Service,简称COS)制作的一个微信小程序示例。在代码结构上包含如下两部分:
applet: 小相册应用包代码,可直接在微信开发者工具中作为项目打开
server: 搭建的 Node 服务端代码,作为服务器和applet通信,提供 CGI 接口示例用于拉取 COS 图片资源、上传图片到 COS、删除 COS 图片等。

小相册主要功能如下:
列出 COS 服务器中的图片列表
点击左上角上传图片图标,可以调用相机拍照或从手机相册选择图片,并将选中的图片上传到 COS 服务器中
轻按任意图片,可进入全屏图片预览模式,并可左右滑动切换预览图片
长按任意图片,可将其保存到本地,或从 COS 中删除

image1.png

部署和运行

拿到了本小程序源码的朋友可以尝试自己运行起来。

整体架构
t3n2rrlm.ulr.jpg.png

1. 准备域名和证书


在微信小程序中,所有的网络请求受到严格限制,不满足条件的域名和协议无法请求,具体包括:
只允许和在 MP 中配置好的域名进行通信,如果还没有域名,需要注册一个。
网络请求必须走 HTTPS 协议,所以你还需要为你的域名申请一个证书。

域名注册好之后,可以登录微信公众平台配置通信域名了。
tjzpgjrz.y5a.jpg.png

2. 云主机和镜像部署

小相册的服务器运行代码和配置已经打包成腾讯云 CVM 镜像,大家可以直接使用。

腾讯云用户可以免费领取礼包,体验腾讯云小程序解决方案。
yik.jpg.png

镜像已包含「剪刀石头布」和「小相册」两个小程序的服务器环境与代码,需要体验两个小程序的朋友无需重复部署

3. 配置 HTTPS

镜像中已经部署了 nginx,需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。
agfty0fn.gfi.jpg.png

配置完成后,即可启动 nginx。

nginx

4. 域名解析

我们还需要添加域名记录解析到我们的云服务器上,这样才可以使用域名进行 HTTPS 服务。

在腾讯云注册的域名,可以直接使用云解析控制台来添加主机记录,直接选择上面购买的 CVM。
k1u.jpg.png

解析生效后,我们在浏览器使用域名就可以进行 HTTPS 访问。
bxfkmjea.g41.jpg.png

5. 开通和配置 COS

小相册示例的图片资源是存储在 COS 上的,要使用 COS 服务,需要登录 COS 管理控制台,然后在其中完成以下操作:
  1. 开通 COS 服务分配得到唯一的APP ID
  2. 使用密钥管理生成一对SecretID和SecretKey(用于调用 COS API)
  3. 在 Bucket 列表中创建公有读私有写访问权限、CDN加速的 bucket(存储图片的目标容器)
复制代码

6. 启动小相册示例 Node 服务

在镜像中,小相册示例的 Node 服务代码已部署在目录/data/release/qcloud-applet-album下:

进入该目录:
  1. cd /data/release/qcloud-applet-album
复制代码

在该目录下有个名为config.js的配置文件(如下所示),按注释修改对应的 COS 配置:
  1. module.exports = {
  2.     // Node 监听的端口号
  3.     port: '9993',
  4.     ROUTE_BASE_PATH: '/applet',

  5.     cosAppId: '填写开通 COS 时分配的 APP ID',
  6.     cosSecretId: '填写密钥 SecretID',
  7.     cosSecretKey: '填写密钥 SecretKey',
  8.     cosFileBucket: '填写创建的公有读私有写的bucket名称',
  9. };
复制代码

小相册示例使用pm2管理 Node 进程,执行以下命令启动 node 服务:
  1. pm2 start process.json
复制代码

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

进入微信公众平台管理后台设置服务器配置,配置类似如下设置:
pg.png

注意:需要将 www.qcloud.la 设置为上面申请的域名,将 downloadFile 合法域名设置为在 COS 管理控制台中自己创建的 bucket 的相应 CDN 加速访问地址,如下图所示:
at.jpg.png

8. 启动小相册 Demo

在微信开发者工具将小相册应用包源码添加为项目,并把源文件config.js中的通讯域名修改成上面申请的域名。
jpg.png

然后点击调试即可打开小相册Demo开始体验。
pr.jpg.png

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

主要功能实现

上传图片

上传图片使用了微信小程序提供的wx.chooseImage(OBJECT)获取需要上传的文件路径,然后调用上传文件接口wx.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)接口可以直接将图片下载和保存本地。这里要注意图片访问地址的域名需要和服务器配置的 dowmloadFile 合法域名一致,否则无法下载。
删除图片

删除图片也十分简单,直接调用文件删除 API 就可以将存储在 COS 服务端的图片删除。

回复下载:
游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

1

帖子

35

积分

新人求带

积分
35
发表于 2016-9-27 10:38:56 | 显示全部楼层
有下载地址么
回复 支持 反对

使用道具 举报

TA的社区排名

积分:NO. 31 名

发帖:NO. 47 名

在线:NO. 80 名

最佳答案
0 

1

主题

144

帖子

2573

积分

专家路上

积分
2573
发表于 2016-9-27 10:56:13 | 显示全部楼层
好东西啊,谢谢楼主分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

11

帖子

35

积分

新人求带

积分
35
发表于 2016-9-27 16:52:51 | 显示全部楼层
上传下载,学习demo
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

17

帖子

205

积分

略知一二

积分
205
发表于 2016-9-28 10:59:51 | 显示全部楼层
学习了
回复

使用道具 举报

最佳答案
0 

0

主题

8

帖子

100

积分

新人求带

积分
100
发表于 2016-9-28 11:39:24 | 显示全部楼层
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

8

帖子

70

积分

新人求带

积分
70
发表于 2016-9-28 13:16:12 | 显示全部楼层
很赞 向你致敬
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

7

帖子

85

积分

新人求带

积分
85
发表于 2016-9-28 14:25:05 | 显示全部楼层

很赞 向你致敬
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

15

帖子

100

积分

新人求带

积分
100
发表于 2016-9-28 22:48:30 | 显示全部楼层
第三方第三方
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

5

帖子

35

积分

新人求带

积分
35
发表于 2016-9-29 09:23:44 | 显示全部楼层
66666666666666666666666666666666666
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com