微搭低代码入门05文件的上传和下载

2024-05-06 22:12

本文主要是介绍微搭低代码入门05文件的上传和下载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 1 创建数据源
  • 2 创建应用
  • 3 创建页面
  • 4 设置导航功能
  • 5 文件上传
  • 6 文件下载
  • 总结

小程序中,我们通常会有文件的上传和下载的需,在微搭中,文件是存放在云存储中,每一个文件都会有一个唯一的fileid,我们本篇就介绍如何通过fileid来实现文件的上传和下载。

1 创建数据源

传统开发对于文件的上传和下载可能需要考虑文件的IO,需要先创建文件,然后通过流进行写入,读取的时候也是通过流进行读取。

低代码的话没有那么复杂,我们的文件是借助数据源来完成的。打开控制台,点击数据模型,点击新建,我们先创建一个数据源
在这里插入图片描述
输入数据源的名称,附件上传,点击创建
在这里插入图片描述
点击编辑创建字段
在这里插入图片描述
输入字段名称附件,字段类型选择文件
在这里插入图片描述
点击保存就完成了数据源的创建

2 创建应用

微搭不需要你写额外的代码实现文件的上传,我们使用表单容器即可。点击应用,点击新建应用,创建一个空白应用
在这里插入图片描述
在这里插入图片描述

3 创建页面

在应用编辑器的左上角点击新建页面的图标,新建两个页面,分别是附件上传和附件下载
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4 设置导航功能

像这种有多个页面的,我们可以通过宫格导航来进行页面的跳转,从右侧的组件库里选择宫格导航,拖入到编辑区
在这里插入图片描述
选中宫格导航,设置导航设置,将菜单改为文件上传和文件下载,选择具体的页面
在这里插入图片描述
在这里插入图片描述

5 文件上传

切换到文件上传的页面,从右侧的组件库添加表单容器到编辑区
在这里插入图片描述
数据模型选择附件上传
在这里插入图片描述
上传成功后,我们需要返回首页,选择组件内置方法等6个事件
在这里插入图片描述
在表单提交成功时增加一个事件,动作选择返回上一页
在这里插入图片描述

6 文件下载

切换到文件下载页面,添加数据列表组件到编辑区
在这里插入图片描述
数据模型选择附件上传
在这里插入图片描述
我们需要处理一下字段的显示,第一个文本组件绑定的内容,我们要用表达式提取出文件名来
在这里插入图片描述
输入如下表达式

$w.item_listView1.fj.split('/').pop().replace(' ', '_').split('-').pop()

图标改成下载的图标
在这里插入图片描述
点击图标的时候要执行下载,在代码区新建一个javascript方法
在这里插入图片描述
在JavaScript代码中输入如下代码

export default async function({event, data}) {  // 假设 data.target 是一个文件的云存储路径或其他有效的下载URL  const tempfile = await $w.cloud.getTempFileURL(data.target)const downloadTask = wx.downloadFile({  url: tempfile, // 文件的下载链接  success: function(res) {  if (res.statusCode === 200) {  // 获取文件系统的管理器  const fsManager = wx.getFileSystemManager();  // 文件的保存路径(自定义路径,确保该目录存在)  const saveFilePath = wx.env.USER_DATA_PATH + '/'+data.target.split('/').pop().replace(' ', '_').split('-').pop();  // 保存文件到本地  fsManager.saveFile({  tempFilePath: res.tempFilePath, // 临时文件路径  filePath: saveFilePath, // 本地文件路径  success: function(res) {  // 保存成功后的操作  console.log('文件已保存到本地:', res.savedFilePath);  $w.utils.showToast({  title: '下载成功',  icon: 'success',  duration: 2000,  });  },  fail: function(err) {  // 保存失败后的操作  console.error('保存文件失败:', err);  $w.utils.showToast({  title: '下载失败',  icon: 'none',  duration: 2000,  });  }  });  }  },  fail: function(err) {  // 下载失败后的操作  console.error('下载文件失败:', err);  $w.utils.showToast({  title: '下载失败',  icon: 'none',  duration: 2000,  });  }  });  }

在给图标定义点击事件的时候,需要传入参数
在这里插入图片描述
在这里插入图片描述
可以看到,微搭中附件是按照路径存储的,我们在下载的时候,先需要将路径换成临时地址就是一个互联网的访问地址

const tempfile = await $w.cloud.getTempFileURL(data.target)

有了这个地址,我们先调用downloadFile方法将文件下载到小程序的临时目录,然后再构造一个目录,将文件真实存储起来

比较难受的是,下载的文件并不会存放到你的手机的一个目录里,因此也就无法直接打开

这个时候需要结合wx.openDocument进行打开显示,要不然用户看到下载成功却无法找到就很难受,但是openDocument只支持几种格式doc、xls、ppt、pdf,所以在规划功能的时候是需要考虑一下的。

总结

我们本篇带着大家实现了一下文件的上传和下载功能,上传我们使用现成的组件实现,下载需要结合小程序的API去调用,还需要注意一些潜在的限制。要是H5的话我们就不需要这么麻烦,有了临时链接直接打开地址就可以实现下载功能了。

这篇关于微搭低代码入门05文件的上传和下载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/965520

相关文章

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

从入门到精通C++11 <chrono> 库特性

《从入门到精通C++11<chrono>库特性》chrono库是C++11中一个非常强大和实用的库,它为时间处理提供了丰富的功能和类型安全的接口,通过本文的介绍,我们了解了chrono库的基本概念... 目录一、引言1.1 为什么需要<chrono>库1.2<chrono>库的基本概念二、时间段(Durat

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性:

解析C++11 static_assert及与Boost库的关联从入门到精通

《解析C++11static_assert及与Boost库的关联从入门到精通》static_assert是C++中强大的编译时验证工具,它能够在编译阶段拦截不符合预期的类型或值,增强代码的健壮性,通... 目录一、背景知识:传统断言方法的局限性1.1 assert宏1.2 #error指令1.3 第三方解决

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具:gofmt 与 go fmt(一)

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么?能干嘛?核心作用:二、索引的 4 种主要类型(附通俗例子)1. BTree 索引(