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

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

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

传统开发无疑需要写专门的代码来处理附件的上传和下载,低代码中是直接通过组件来实现附件的上传,通过微信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);
    }
}

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

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

相关文章
|
1月前
|
监控 前端开发 安全
C#一分钟浅谈:文件上传与下载功能实现
【10月更文挑战第2天】在Web应用开发中,文件的上传与下载是常见需求。本文从基础入手,详细讲解如何在C#环境下实现文件上传与下载。首先介绍前端表单设计及后端接收保存方法,使用`<input type="file">`与`IFormFile`接口;接着探讨错误处理与优化策略,如安全性验证和路径管理;最后讲解文件下载的基本步骤,包括确定文件位置、设置响应头及发送文件流。此外,还提供了进阶技巧,如并发处理、大文件分块上传及进度监控,帮助开发者构建更健壮的应用系统。
90 15
|
6月前
|
前端开发
表单设计器附件的上传、显示和下载
表单设计器附件的上传、显示和下载
44 1
表单设计器附件的上传、显示和下载
|
存储 JavaScript 前端开发
Java实现图片的上传和显示
Java实现图片的上传和显示
483 0
|
编解码 Java 应用服务中间件
文件的上传和下载
文件的上传和下载
93 0
html+css实战35-上传多个文件功能
html+css实战35-上传多个文件功能
114 0
html+css实战35-上传多个文件功能
|
Web App开发 Linux 网络安全
盘点4大下载神器,教你分分钟搞定文件下载
盘点4大下载神器,教你分分钟搞定文件下载
465 0
盘点4大下载神器,教你分分钟搞定文件下载
|
Web App开发 SQL Java
Java实现图片上传到服务器,并把上传的图片读取出来
在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢?   下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的不太清楚) 实现的思路: 工具:MySQL,eclipse 首先,在MySQL中创建了两个表,一个t_user表,用来存放用户名,密码等个人信息, 一个t_touxiang表,
3554 0
|
PHP 数据格式 XML
给微赞程序富文本编辑器加上传附件功能
微赞程序中,新闻编辑中,使用的ueditor,做了定制,去掉了一些按钮,但是一些情况下需要上传附件 如果给ueditor加上上传附件的图标,富文本编辑的调用是使用了以下函数的 function tpl_ueditor($id, $value = '', $options = array()) { 函数所在位置在/web/common/tpl.func.php这个文件中约985
2356 0