微信小程序开发技巧总结（二） – 文件的选取、移动、上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说，需要上传的文件形式主要为图片，微信为此提供了接口。 [代码]wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success (res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths } }) [代码] 其次为视频文件的选取，微信也为此提供了接口。 [代码]wx.chooseVideo({ sourceType: ['album','camera'], maxDuration: 60, //视频长度 单位 s camera: 'back', //选取前置 摄像 还是 后置 摄像 success(res) { console.log(res.tempFilePath) } }) [代码] 也为其提供了视频和图片的二合一接口，这个接口不建议调用，图片和视频的上传建议区分开。 [代码]wx.chooseMedia({ count: 9, mediaType: ['image','video'], sourceType: ['album', 'camera'], maxDuration: 30, camera: 'back', success(res) { console.log(res.tempFilePath)con console.log(res.size) } }) [代码] 这几个接口调用成功的回调函数中，都返回的是文件在文件在本机中的路径。 [代码]res.tempFilePath [代码] 这是一个 数组，存放着选择的所有文件的路径，用于上传。 1.2 其余形式各种文档 那么如果是想要在小程序中上传 doc、pdf、ppt 等类型的文件怎么处理？首先要注意的是微信小程序并没有给用户提供文件管理器接口。 开发者：我想要个文件管理器接口！ 官方：不，你不想 聪明的开发者他没有办法，只能另辟蹊径。微信提供了一个选择客户端会话文件的方法。 [代码]wx.chooseMessageFile({ success(res){ console.log(res.tempFilePath) } }) [代码] 与上面两个接口相同，返回的也是文件在本地的存储路径，但是不同的是，这个接口可以选取全部的文件类型。 开发者如果想要上传非图片和视频内容的话，需要两步走。 打开微信文件传输助手，将想要上传的文件发送到文件传输助手 在小程序中调用这个接口，选择文件传输助手，从会话中选择想要上传的文件。 [图片] [图片] 2.文件的上传 2.1 uploadFile方法 所有的文件都是以字节流的形式进行上传，所以上传形式并没有什么本质区别，都是调用相应的接口进行上传。 小程序端写法如下： [代码]wx.uploadFile({ url: '你的服务器函数地址', //仅为示例，非真实的接口地址 filePath: '需要上传的文件路径', //res.tempFilepaths name: 'file', // 文件对应的key ，默认 为 file formData: { 'user': 'test' }, //上传额外携带的参数 success (res){ const data = res.data //do something } }) [代码] 2.2 服务器端如何处理上传的文件 服务端如何接受文件的上传？仅展示Java方式（SpringBoot 框架） [代码]@Controller @ResponseBody public class FileController { //文件上传控制类,是核心配置类，Win <->Linux @RequestMapping(value = "/upload/images") public String uploadimages(HttpServletRequest request,@RequestParam("file") MultipartFile file, @RequestParam("user") String user) throws IOException { //更换服务器，这个值也需要修改 //图片上传写法 //type 是上传图片的类型 if(!file.isEmpty()){ //文件不为空 //String path = "E:"+File.separator+"images"+File.separator+type; // this is windows method String path = "/share"+File.separator+"images"+File.separator+type; // this is Linux method String filename = file.getOriginalFilename(); File filepath = new File(path,filename);//新建文件存储路径 System.out.println(filepath); if(!filepath.getParentFile().mkdirs()){ filepath.getParentFile().mkdirs(); } file.transferTo(new File(path+File.separator+filename)); //想要返回可直接访问的链接还要配置 映射，具体请看下面链接 return "你的IP地址"+"/images/"+type+"/"+filename; }else { return "error"; } } } [代码] 配置访问映射 文件访问映射 2.3 云开发文件上传 微信小程序支持云开发，其文件上传接口有一些差异，但是不需要自己再构建后台。 [代码]wx.cloud.uploadFile({ cloudPath: 'file/' + '你的文件名字（带格式后缀）', // 在云端存储的路径 filePath: '', // 就是选择文件返回的路径 }).then(res => { // get resource ID console.log(res.fileID) }).catch(error => { // handle error }) [代码] 我们可以根据返回的fileID 置换 真实的文件访问地址。 其置换方式参见官方文档： [代码]wx.cloud.getTempFileURL({ fileList: ['cloud://xxx', 'cloud://yyy'], success: res => { // get temp file URL console.log(res.fileList) }, fail: err => { // handle error } }) [代码] TIPS：关于云开发文件上传的建议 如果没有保密需求，为了方便后续开发，存储到数据库中的最好是可以直接访问的文件链接。 置换真实文件地址，不要每次上传一次文件就置换一次，先把返回的fileID 存放在数组中，到该事务所有上传完成后，再使用fileID 数组置换真实文件访问链接数组。 要考虑文件名重复的可能，建议使用时间戳在 wx.cloud.uploadFile 中的 cloudPath 中对存储到云环境中的文件命名进行格式化。 总的来说就是先上传文件，再向数据库中写入记录。 2.4 多文件同时上传的处理方式 uploadFile 每次只能上传一个文件 如何处理这个问题？ A.不考虑文件的上传次序问题，可以采用遍历上传的方式，采用精确的时间戳和遍历index对文件名进行格式化。通过定时触发检测函数判断是否全部上传完成。这种方式考虑的是并发能力。 [代码]upSeveralfiles() { wx.showLoading({ title: '上传中~', mask: true }) var that = this; var timecode = sev.vcode(new Date()); // 这是时间戳编码函数 var files = this.data.fileList; // 这是 选择文件中返回的 res.tempFilePath 数组 var len = files.length; var i = 0; for (i = 0; i < len; i++) { var str = files[i].name; wx.cloud.uploadFile({ cloudPath: 'file/' + '(' + sev.getformatTime(new Date()) + ')' + str, filePath: files[i].path, success(res) { console.log(res) that.setData({ cloudlist: that.data.cloudlist.concat([res.fileID]), }) // cloudlist 是存放 文件链接置换id 的数组 , 非云开发存储的就是真实可访问的链接数组 // 如果使用的不是云开发 那么 可以返回真实的 访问地址 }, fail(res) { console.log(res) } }) } // 使用定时器检测文件是否全部上传完成 , 并 判断是否进行下一步 操作 var timer = setInterval(function () { if (that.data.cloudlist.length == len) { // 只有全部上传成功了 长度才会相等 clearInterval(timer); // 继续执行下一步 ，根据 cloudlist 置换真实地址 并存放到数据库 //　如果使用的非云开发，那么就继续执行　存储至数据库的操作 } }, 1000) } [代码] 补充文件编码函数 sev.js 中的根据时间编码部分 , 可以根据实际流量自定义。 [代码]function getformatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() return [year, month, day].map(formatNumber).join('-'); }; [代码] B.考虑文件的上传次序问题,采用回调方式进行文件上传(更推荐使用这种方式) [代码]data: { fileList: [], realList: [],//云端地址链接列表 fileid: 0, }, upSeveralfiles() { var that = this; var files = this.data.fileList; // 这是 选择文件中返回的 res.tempFilePath 数组 var len = files.length; var uid = this.data.fileid; wx.uploadFile({ url: '你的服务器文件接收函数请求地址', name: 'file', filePath: files[uid], header: { "Content-Type": "multipart/form-data" }, success(res) { that.setData({ fileid: uid + 1, realList: that.data.realList.concat([res.data]) }, () => { if (that.data.fileid == len) { // 上传完成 ,执行下一步操作 } else { //上传完一个文件 递归执行 下次上传 that.upSeveralfiles(); } }) }, fail(res) { console.log(res.data) } }) }, [代码] 以上是提供的两种思路 , 无论是不是云开发 , 两种思路都是共通的,适用于多文件上传. 文件的下载 这个地方唯一值得注意的是云开发的一种下载方式 可以通过fileID进行download , 当然只能下载存储在自己云环境中的文件. [代码]wx.cloud.downloadFile({ fileID: '', success: res => { console.log(res.tempFilePath) }, fail: err => { } }) [代码] [代码]wx.downloadFile({ url: '', //仅为示例，并非真实的资源 success (res) { //res.tempFilePath }) [代码] 下载进度监控 , 用于下载进度条绘制等功能实现 [代码]const downloadTask = wx.cloud.downloadFile({ *** }) // wx.downloadFile 同理 downloadTask.onProgressUpdate((res) => { //res.progress 为下载进度 }) [代码] 下载下来的文件支持直接打开,就像是在微信聊天中打开一样，需要下载插件。 其使用方式为: [代码]wx.openDocument({ filePath: res.tempFilePath //为文件路径 非数组 , 可使用回调函数 success 等 }) [代码] 文件的移动 这个一般情况下是用不到的, 也不建议使用移动文件的方法作为功能实现手段 ,必然有更好的替代方式,比如修改数据库路径 和 真实文件路径的映射, 效率更高一些. 这里仅讲云开发移动文件方式。 [代码]const cloud = require('wx-server-sdk') const fs = require('fs') const path = require('path') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) exports.main = async (event, context) => { const fileStream = fs.createReadStream(path.join(__dirname, 'demo.jpg')) //这个可以读取 云存储 中的文件 ， 所谓删除 就是复制 然后 删除原位置文件 return await cloud.uploadFile({ cloudPath: 'demo.jpg', fileContent: fileStream, }) } [代码] 具体开发文档 建议在数据库中修改映射路径最好。 需要小程序开发的请联系我QQ ： 1025584691

小程序 · 云开发是腾讯云和微信团队在 2018 年推出的产品，面向小程序开发者推出的一体化云计算解决方案，帮助开发者快速开发、上线一个应用。不少人认为它是一种新的开发模式。但是，它真的是一种新的模式么？ 不是的，这种开发模式早已有之 小程序 · 云开发这种模式被称为后端即服务：“Backend as a Service”，出现也有不少的年头，至今还有一些其他的服务商提供了相同的服务，这里也推荐给你。 LeanCloud LeanCloud 是国内做的比较早、 比较大的后端云服务，早在我上高中的时候，已经听闻她的大名，到了今天，LeanCloud 仍然为海量的开发者提供一整套后端云服务。我个人也是非常喜欢使用 LeanCloud 的产品，也曾为 LeanCloud 制作过课程。目前 LeanCloud 支持小程序端、PC 端、Web 端、Unity、Android、iOS 等多个平台。 官网：https://www.leancloud.cn/ Firebase Firebase 是 Google 家的产品，提供了大量的优秀的云计算组件和产品能力，可以帮助开发者快速开发各种应用。不过美中不足的是，Firebase 不支持国内产品，因此，也没有小程序端的支持。Firebase 支持 Web、PC、Android、iOS、Unity 等多个端。 官网：http://firebase.google.cn/ 知晓云 知晓云是国内媒体爱范针对小程序场景推出的一体化后端云服务。其提供了大量帮助开发者运营小程序的工具，可以帮助开发者快速构建一个好用的小程序。其目前支持了小程序端、Web 端、Android 端和 iOS 端。 官网：https://cloud.minapp.com/ Bmob Bmob 是国内一个比较早期的后端云服务，近几年显得不愠不火，但总的来说，还是一个非常不错的后端云服务，值得一试。 官网：https://bmob.cn/ 扫描下方二维码，关注我的微信公众号，获取每日微信开发知识 [图片] 或添加我的个人微信：huanchengbai，和我取得联系

很多小伙伴想在春节放假期间学小程序，但是小程序学习的资源和教程可能不太好找。所以小助手精心整理了一期，全是干货！认真学，开启美妙的小程序开发之旅，做一个属于自己的微信小程序。有需要的小伙伴收藏好这期文章哦~ 本文收集整理了微信小程序开发资源，包括官方文档，云开发训练营文档，视频教程以及实战源码推荐，会不间断更新。。 欢迎添加云开发小助手CloudBase微信：Tcloudedu1 ，一起加入技术交流群~ 小程序云开发官方公众号 [图片] 目录 官方文档 云开发训练营 视频教程 小程序·云开发Demo 技术交流群 官方文档 小程序开发者工具 小程序设计指南 小程序开发教程 小程序框架 小程序组件 小程序API 小程序开发者工具 小程序云开发文档 云开发训练营 小程序开发入门 小程序与JavaScript 云开发快速入门 [图片] 视频教程 腾讯云云开发B站:https://space.bilibili.com/447496276 [图片] 小程序·云开发Demo 技术博客小程序 包括文章的发布及浏览、评论、点赞、浏览历史、分类、排行榜、分享、生成海报图等。 网盘小程序 兼具文件存储与分享功能的专属网盘小程序。 教务助手小程序 用完即走，查个成绩和课表，无需下载app或去翻看公众号内的历史内容。 功能日历小程序 既能查看日历又能备注事项，看云开发如何支持功能性日历小程序的快速开发。 客户业务需求收集小程序 用云开发快速制作客户业务需求收集小程序，教你用云开发实现小程序版“朋友圈”的发布与展示。 小程序朋友圈 把朋友圈装进小程序需要几步？借助云开发实现小程序朋友圈的发布与展示。 南苑导览 一款由学生独立开发的以地图为载体，提供中山大学南方学院具体地点的位置信息、导航、校园历史及文化介绍的小程序。 互动打卡小程序 用云开发轻松构建精美互动打卡小程序，交互式双人打卡，快乐加倍。 个性头像小程序 别再@官方啦！云开发教你轻松制作个性头像小程序，趣味挂件、个性icon。 二手书商城小程序 云开发轻松制作二手书交易商城小程序，让智慧延续，让温暖传递。 后台数据批量导出 小程序开发过程中如何将云数据库中的数据批量导出至excel。 发送邮件 初学者福音，手把手教你用小程序云开发实现邮件发送功能。 高考查分小程序 实现高考分数轻松查，小程序源码。 mini论坛 仅需两天轻松搭建mini论坛小程序。 运动圈小程序 打造运动圈小程序（以乒乓球为例），实现球友间高效互动。 心情日记小程序 我能想到最浪漫的事，可能就是“你的心事我全知晓”。 最美恋爱小程序 小程序前端用的是taro框架写的，后台用的云开发。教你用云开发为心爱的人做个小程。 校园约拍小程序 校园场景下，小程序·云开发大显身手，校园约拍小程序源码。 体重记录小程序 只想记录每日体重还得下个APP，不用那么麻烦！用云开发做个专属体重记录小程序，看看你每天瘦了多少。 口袋工具 口袋工具之历史上的今天。一个基于云开发的小程序，看看历史上的今天都发生了啥。 迷你微博 独立做个精简版微博出来让你刷刷刷吗？而且，它还兼具搜索、点赞、主页的功能 多媒体小程序 使用小程序·云开发构建多媒体小程序。 技术交流群 交流技术为主，开发学习工作中遇到问题可以在群内交流，欢迎有需要的朋友加群。 添加小助手微信（Tcloudedu1），回复“技术群”，即可加入云开发技术群。 最后 如果你有关于使用腾讯云云开发相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们~ 关注腾讯云云开发，后台回复【源码】，获取更多微信小程序云开发实战源码。 [图片] [图片] [图片] 关注「腾讯云云开发」，后台回复【 源码 】，获取更多微信小程序云开发实战源码。 持续更新中… [图片]