利用微搭低代码实现附件的上传和下载

简介: 利用微搭低代码实现附件的上传和下载

日常我们在开发小程序时,对于附件的上传和下载的需求还是比较普遍的。对于初学者来说,理解存储的概念,将附件上传到服务器指定位置,并从指定位置下载无疑都是困难的。

传统开发无疑需要写专门的代码来处理附件的上传和下载,低代码中是直接通过组件来实现附件的上传,通过微信api的调用来实现附件的下载。本文就介绍一下在微搭低代码中如何实现这个业务场景。

步骤一:创建数据源


我们要想将附件上传上去,一个是要有专门的存储空间用来存放附件,另外一个就是需要将附件的路径记录到数据源中,方便在列表页面获取并下载。

打开低码的控制台,找到数据模型,点击新建数据模型

输入名称和标识

新建两个字段,标题和附件,标题选择文本类型,附件选择文件类型

步骤二 创建模型应用


我们附件上传的时候有两种形式一种是从PC端上传,一种是从移动端上传。我们先展示从PC端上传。

点击应用,点击新建模型应用

输入应用的名称

勾选数据源,创建页面

微搭会自动生成增删改查的页面,点击发布就可以在企业工作台里录入数据

我们在企业控制台录入一条数据,便于后续的下载功能演示

步骤3:创建自定义应用


PC端的数据录入好之后,我们就创建一个移动端的小程序来实现附件的下载。

点击控制台的应用,新建自定义应用

输入应用的名称

点击空白页面,进入应用的编辑器

先创建一个详情页

输入页面的名称和标识

在首页上放置一个列表视图组件

选择数据模型,选择我们刚创建的数据源

选中文本组件,绑定为数据源的标题字段

给标题设置点击事件,跳转到详情页

跳转的时候需要将数据标识传递过去,新建一个页面参数

绑定为我们的数据标识

切换到详情页,给页面增加一个数据视图组件

设置数据模型为上边创建的数据源,并且设置筛选条件,数据标识等于我们页面设置的参数变量

然后给里边的文本组件依次绑定对应的字段

点击附件的时候如果希望打开附件,需要定义一个低代码方法,打开低代码编辑器

创建低码方法,输入如下代码

export default function ({ event, data }) {
    try {
        wx.cloud.downloadFile({
            fileID: data.target, // 文件 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);
    }
}

给文本定义点击事件,调用定义的低码方法,并且传参

定义好之后发布成小程序就可以体验功能了。

相关文章
|
2月前
|
监控 前端开发 安全
C#一分钟浅谈:文件上传与下载功能实现
【10月更文挑战第2天】在Web应用开发中,文件的上传与下载是常见需求。本文从基础入手,详细讲解如何在C#环境下实现文件上传与下载。首先介绍前端表单设计及后端接收保存方法,使用`<input type="file">`与`IFormFile`接口;接着探讨错误处理与优化策略,如安全性验证和路径管理;最后讲解文件下载的基本步骤,包括确定文件位置、设置响应头及发送文件流。此外,还提供了进阶技巧,如并发处理、大文件分块上传及进度监控,帮助开发者构建更健壮的应用系统。
151 15
|
7月前
|
前端开发
表单设计器附件的上传、显示和下载
表单设计器附件的上传、显示和下载
48 1
表单设计器附件的上传、显示和下载
|
7月前
|
前端开发
前端实现生成pdf文件并下载
前端实现生成pdf文件并下载
120 1
|
存储 JavaScript 前端开发
Java实现图片的上传和显示
Java实现图片的上传和显示
550 0
|
编解码 Java 应用服务中间件
文件的上传和下载
文件的上传和下载
97 0
|
分布式计算 Shell Spark
Zeepelin_安装_上传| 学习笔记
快速学习Zeepelin_安装_上传
Zeepelin_安装_上传| 学习笔记
|
移动开发 前端开发 JavaScript
前端实现PDF文件下载的两种方式
前端实现PDF文件下载的两种方式
2383 0
前端实现PDF文件下载的两种方式
|
缓存 前端开发
前端下载并生成文件
前端下载并生成文件
html+css实战35-上传多个文件功能
html+css实战35-上传多个文件功能
120 0
html+css实战35-上传多个文件功能