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

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. windows下安装Pycham2020软件

    1.在pycham官网下载安装软件https://www.jetbrains.com/pycharm/download/#section=windows 2.我下载的是64位的安装包,现在开始安装 3 ...

  2. Airtest常见的素定位不到

    一.为什么发这博客 前几天业务需要需要操作云手机进行爬取没办法只有混进airtest官方群边学习边进行开发,蛮简单的东西(可能是我之前会selenium,appuim关系吧),但是群里会有很多问题,关 ...

  3. Python网络数据采集- 创建爬虫

    1. 初见网络爬虫 1.1 网络连接 输出某个网页的全部 HTML 代码. urllib 是 Python 的标准库(就是说你不用额外安装就可以运行这个例子),包含了从网络请求数据,处理 cookie ...

  4. 《Docker从入门到跑路》之镜像和容器的基本操作

    一.获取镜像 官方提供了一个公共镜像仓库Docker Hub,默认是从这上面获取镜像的. 搜素镜像使用docker search 命令: # docker search --help Usage: d ...

  5. vue-双向响应数据底层原理分析

    总所周知,vue的一个大特色就是实现了双向数据响应,数据改变,视图中引用该数据的部分也会自动更新 一.双向数据绑定基本思路 “数据改变,视图中引用该数据的部分也会自动更新“,从这句话,我们可以分析出以 ...

  6. Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现

    嘿嘿嘿,关于android滑动的操作,是不是经常都会用到呢. 我肯定也要学习一下啦. https://blog.csdn.net/u013184970/article/details/82882107 ...

  7. 使用 React hooks 转化 class 的一些思考

    Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 使用 React hooks 转化 class 的一些思考 ...

  8. 设计模式之GOF23模板模式

    模板模式template method 场景:具有具体流程,但具体某一步的业务不同 到银行办理业务:排队取号,办理业务,给员工打分 请客吃饭:等待,点单,吃饭,结账 模板方法模式介绍:模板方法是编程常 ...

  9. python机器学习笔记:EM算法

    EM算法也称期望最大化(Expectation-Maximum,简称EM)算法,它是一个基础算法,是很多机器学习领域的基础,比如隐式马尔科夫算法(HMM),LDA主题模型的变分推断算法等等.本文对于E ...

  10. OpenCV开发笔记(五十六):红胖子8分钟带你深入了解多种图形拟合逼近轮廓(图文并茂+浅显易懂+程序源码)

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...