微搭低代码入门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

相关文章

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

MySQL进行数据库审计的详细步骤和示例代码

《MySQL进行数据库审计的详细步骤和示例代码》数据库审计通过触发器、内置功能及第三方工具记录和监控数据库活动,确保安全、完整与合规,Java代码实现自动化日志记录,整合分析系统提升监控效率,本文给大... 目录一、数据库审计的基本概念二、使用触发器进行数据库审计1. 创建审计表2. 创建触发器三、Java

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

SQL server数据库如何下载和安装

《SQLserver数据库如何下载和安装》本文指导如何下载安装SQLServer2022评估版及SSMS工具,涵盖安装配置、连接字符串设置、C#连接数据库方法和安全注意事项,如混合验证、参数化查... 目录第一步:打开官网下载对应文件第二步:程序安装配置第三部:安装工具SQL Server Manageme

从入门到精通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方法。右键项目的属性: