微信小程序开发 -- 通过云函数下载任意文件

1.云开发介绍

​ 微信小程序开发者众所周知,小程序开发拥有许多限制,当我还是一个菜鸟入门的时候,第一关就卡在了没有备案域名的HTTP请求上面,那时候云开发上线也没多久,使用的人也不是很多,我抱着尝试的态度去接触了云开发,发现了云开发的妙处。(自由)

blog:微信小程序HTTP访问链接解决方案

2.小程序文件下载限制

微信小程序除了对访问地址有限制之外,对于文件下载,也存在的限制,如下图所示,只有资源服务器A,在downloadFile域名白名单内且配置了SSL访问,即HTTPS才可以正常的下载资源。(闲的蛋疼,饱受诟病)

![](https://gitee.com/Kindear/BlogAssets/raw/master/cnblogs/未命名文件 (15).png)

3.云函数下载任意文件设计

依然秉持着对云开发的信任,尝试使用云函数进行任意文件下载,设计思路如下图所示。

![](https://gitee.com/Kindear/BlogAssets/raw/master/cnblogs/未命名文件 (16).png)

上图描述的两种通过云函数下载文件的方式

  1. 云函数只作为一个数据中转节点,请求资源转化为Buffer直接返回给小程序端。
  2. 云函数作为存储器,下载资源存储到云空间,并返回给小程序端fileID(置换下载地址)。

4.云函数实现方式

通过请求头配置实现请求资源文件返回Buffer。

const cloud = require('wx-server-sdk')

const request = require('request')

const fs = require('fs')

const path = require('path')

cloud.init({

  env: cloud.DYNAMIC_CURRENT_ENV

})

const db = cloud.database(); //初始化云数据库

exports.main = async (event, context) => {

  var url = event.url; //下载地址,应该由前端进行传递,而后云函数进行下载

  var type = event.type; //type:'dump'(转储) 'trans'(传递)

  var filename = event.filename;

  //文件名称需要自己进行上传,或者substring 截取url

  var options = {

    url: url,

    encoding: null,

    headers: {

      "content-type": "application/octet-stream",

    },

  };

  return new Promise(function (resolve, reject) {

    request(options, function (error, response, body) {

      if(type=='trans'){

          //中继

        resolve(body)

      }else{

          //转储

        resolve(

          cloud.uploadFile({

            cloudPath: 'tmp/'+filename,

            fileContent: body,

          })

        )

      }

    })

  })

}

5.中继下载方式(不推荐,适合小文件)

如果文件达到一定体积,会出现如下问题:

中继下载方式对文件的大小有限制,这是由于云函数返回限制决定的,很容易超出。但是对于一些几kb的文件,推荐使用这种方式,减少了转储所需要耗费的时间。

中继方式下载资源写法如下:

   var _filename = '美景.jpg';

   var _url = 'http://img.apisev.cn:8081/wechat/sk1.jpg';

    wx.cloud.callFunction({

      name:'transfile',

      data:{

        url:_url,

        filename:_filename,

        type:'trans'

      },

      success(res){

        console.log(res)

        const FileSystemManager = wx.getFileSystemManager();

        FileSystemManager.writeFile({

          filePath:wx.env.USER_DATA_PATH+"/"+_filename,

          data:res.result,

          encoding: 'binary',//编码方式,二进制

          success(tres){

            console.log(tres)

            //可以根据filePath 打开文件,此处以为图片举例

            var _filepath = wx.env.USER_DATA_PATH+"/"+_filename;

            wx.previewImage({

              urls: [_filepath],

            })

          },fail(tres){

            console.log(tres)

          }

        })

      },fail(res){

        console.log(res)

      }

    })

真机运行,可以成功预览资源图片。

6.转储下载方式(推荐)

首先在互联网资源随便找了一个图片资源地址,调用云函数。

var _filename = '美景.jpg';

var _url = 'https://n.sinaimg.cn/sinacn20106/212/w2048h1364/20190828/cded-icuacsa3953451.jpg';

wx.cloud.callFunction({

      name:'transfile',

      data:{

        url:_url,

        filename:_filename,

        type:'dump'

      },

      success(res){

        console.log(res)

      },fail(res){

        console.log(res)

      }

 })

返回内容如下:

图片成功被转存到云存储空间。

7.参考文档

[1] FileSystemManager.writeFile(Object object)

微信小程序开发 -- 通过云函数下载任意文件的更多相关文章

  1. 微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载

    微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 1.不同类型文件的选取 1.1 常用的图片 视频 对于大部分开发者来说,需要上传的文件形式主要为图片,微信为此提供了接口. wx.ch ...

  2. 微信小程序开发——使用回调函数出现异常:TypeError: Cannot read property 'setData' of undefined

    关键技术点: 作用域问题——回调函数中的作用域已经脱离了调用函数了,因此需要在回调函数外边把this赋给一个新的变量才可以了. 业务需求: 微信小程序开发,业务逻辑需要,需要把获取手机号码的业务逻辑作 ...

  3. 微信小程序如何创建云函数并安装wx-server-sdk依赖

    时间:2020/01/23 步骤 1.在微信开发者工具中云函数所在的文件夹的图标与其他文件夹是不同的,如下(第一个是云函数): 如果需要使一个普通文件变为云函数文件夹,需要在project.confi ...

  4. 微信小程序开发之云开发

    创建云开发小程序项目 开通云开发 开通后界面 选择开发环境 开启使用npm模块 安装wx-server-sdk npm install --save wx-server-sdk@latest 创建云函 ...

  5. 微信小程序开发实战(云开发)--资产管理工具

    添加首页 menu页面 截图展示 menu.js源码 // pages/menu/menu.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听 ...

  6. 微信小程序开发平台新功能「云开发」快速上手体验

    微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...

  7. 微信小程序开发(二)----- 云开发

    1.概念 微信小程序的云开发是腾讯云与微信团队深度合作推出的一个全新的小程序的解决方案,它提供了云函数.云数据库与云存储这三大基础能力支持,随着云开发的出现,小程序的开发者可以将服务端的部署和运营的环 ...

  8. 微信小程序开发《一》:阿里云tomcat免费配置https

    小狼咕咕最近开启了微信小程序开发的征程,由于微信小程序的前后台通信必须通过https协议,所以小狼咕咕第一件要做的事就是配置一个能够通过https访问的后台服务.小狼咕咕用的是阿里云ECS服务器,Li ...

  9. $微信小程序开发实践点滴——接入Bmob后端云

    Bmob后端云官网:http://www.bmob.cn/ 微信公众平台官网:https://mp.weixin.qq.com/ 微信小程序官方开发文档:https://mp.weixin.qq.co ...

随机推荐

  1. matlab混合编程向导(vc,vb,.net...)

    一.matlab与vc混编  1.通过mcc将matlab的m文件转化为cpp,c文件或dll供vc调用:     这方面的实现推荐精华区Zosco和ljw总结的方法(x-6-1-4-3-1和2)  ...

  2. 程序猿使用Python的tkinter库进行GUI编程肯定要会的事件处理

    事件类型用户通过鼠标.键盘.游戏控制设备在与图形界面交互时,就会触发事件.tkinter事件通常采用了将事件名称放置于尖括号内的字符串表示,尖括号中的内容我们称之为事件类型.事件类型有其通用的定义方式 ...

  3. Ansible入门知识

    一.ansible概述 Ansible是一款为类Unix系统开发的自由开源的配置和自动化工具.它用Python写成,类似于saltstack和Puppet,但是有一个不同和优点是我们不需要在节点中安装 ...

  4. 【Redis】跳跃表原理分析与基本代码实现(java)

    最近开始看Redis设计原理,碰到一个从未遇见的数据结构:跳跃表(skiplist).于是花时间学习了跳表的原理,并用java对其实现. 主要参考以下两本书: <Redis设计与实现>跳表 ...

  5. spring mvc从前台往后台传递参数的三种方式

     jsp页面: 第一种:使用控制器方法形参的方式(常用) 第二种:使用模型传参的方式(如果前台往后台传递的参数非常多,如果还使用形参的方式传递,非常复杂.我们可以使用模型传参的方式,把多 个请求的参数 ...

  6. ssh框架整合时的延迟加载问题(no session问题)的分析以及解决方案

    当我们整合完三大框架,并采用hibernate的延迟加载方案时,会出现如下的异常: 现在对这个异常进行分析,如下图所示(模拟通过id查询用户信息的过程): 上图分析了为什么会出现no session的 ...

  7. Vue + Element-ui实现后台管理系统(1) --- 总述

    总述 一.项目效果  整体效果 登陆页 后台首页 用户管理页 说明 这里所有的数据都不是直接通过后端获取的, 而是通过Mock这个工具来模拟后端返回的接口数据. 附上github地址: mall-ma ...

  8. echarts 中 symbol 自定义图片

    首先我使用的技术框架的VUE,当然该方法在其他框架也是适用的,这点大家注意一下~ 在官方文档里面,修改标记的图形(symbol)的方法有三种: 一:ECharts 提供的标记类型有 'circle', ...

  9. [hdu2594]kmp水题

    题意:求最长的a的前缀同时满足是b的后缀,把a,b连在一起,kmp跑一下,迭代next直到长度小于等于a,b长度的最小值为止,即为答案. #pragma comment(linker, "/ ...

  10. 2018-06-19 js DOM对象

    DOM对象: Doucument Object Model即文档对象 DOM对象的操作: 1.找元素 返回元素对象: var obj=document.getElementById();//通过Id查 ...