【原】利用微搭实现附件的上传和下载

低代码布道师 2023-10-12 发布于内蒙古

展开全文

在小程序中，附件上传和下载是常见的需求，一般都需要调用微信的api才可以实现。对于初学者来说，理解文件的本地目录，上传到云端目录这些概念无疑是比较困难的。

低代码有一个好处就是将常见的业务场景进行封装，以组件的形式提供，免去了我们自己琢磨一些比较难的技术点所耗费的时间。今天这节课咱们就讲一讲微搭最近更新的一个版本，提供了附件的上传和下载。

附件上传

附件上传的思路是通过建立数据源，让附件有个存储的地方，先新建一个数据源，字段的话选择文件类型

数据源创建好后，创建一个空白应用

应用创建好后，先添加一个表单容器组件

选择好数据源之后，表单的组件就自动生成好了

页面开发好后就可以上传附件了，上传成功后可以看到数据源里附件已经上传成功了

看到这里可能有的同学会有疑问，数据库里只存了路径呀，真正的附件放到哪里了呢？其实你的环境开通了之后是包含一个线上的存储的，可以打开看到资源现在利用的情况

这里的cos存储就是指的附件的存储空间，相当于你在网上有一块自己的硬盘，日常可以放一些图片啊、excel啊、pdf之类的。

那我还是希望看一看究竟在哪里，那也是可行的，在导航栏上找到云产品，点击云开发cloudbase

点击属于你自己的环境

在云存储里就可以看到你上传的附件啦

附件下载

我们光有上传还是不够的，一般上传的资料是需要下载的，那下载怎么办呢？这个时候就必须要通过写代码解决了。那有的同学不会写怎么办？不会写也没事，我认为编程需要经过几个阶段。第一阶段，其实是拷贝和粘贴阶段，也就是段子里讲的ctrl+c和ctrl+v。

其实你先学会复制粘贴，起码就说明你找到了可以解决问题的方案。第一阶段熟练了之后就是下一个阶段，举一反三。你粘贴一段代码后，肯定要结合自己的需求进行一定的改造。

当然了到了第二阶段，你就不得不熟悉一下编程的语言，咱们低代码的技术栈是在js部分，所以你需要学习js、es6、nodejs，因为不管是在低代码编辑器里写低代码，还是在数据源里写云函数，都需要会这三个前提。

如果第二阶段也通过了，那么到第三阶段就是自由发挥的阶段了，这一阶段主要要通过阅读官方提供的模板来提高编程的水平，主要学习官方的设计思路，还有就是如何将代码写的比较简练。

如果三个阶段都通过了，后续我建议你带着问题学习，可以看看身边有没有开公司或者开店的朋友，和他聊一聊，他的商业模式是什么样子的，他目前存不存在管理的问题，结合你的技能或者给他打造一个小程序，或者给他开发一套企业微信使用的程序，当然了要结合企业工作台来使用。

经过这三个阶段的历练，你就基本具备了全栈开发的能力，那么就可以自行接单了。

话题扯得有点远了，咱们还是回到主题上，如何实现下载呢？

解决思路是使用微信的下载api，结合在线打开api实现附件的在线预览。

在页面中添加如下的代码

export default function({event, data}) {  try{wx.cloud.downloadFile({  fileID: 'cloud://lowcode-4g3rs4de0a58b06e.6c6f-lowcode-4g3rs4de0a58b06e-1305601167/weda-uploader/file-87d05eb1-3f6b-4c44-b96b-f9efee5cd7c3-1月17–21日.xlsx', // 文件 ID  success: res => {    // 返回临时文件路径    console.log(res.tempFilePath)    let filePath = res.tempFilePath    wx.openDocument({      showMenu:true,      filePath: filePath,

      success: function (res) {

        console.log('打开文档成功')

      }

    })  },  fail: console.error})}catch(e){  console.log('错误代码', e.code, '错误信息', e.message);}}