使用ivx实现拖拽上传文件功能的经验总结

最新推荐文章于 2023-04-27 10:41:22 发布
原创 最新推荐文章于 2023-04-27 10:41:22 发布 · 821 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用ivx通过拖拽放置容器实现上传文件功能。首先，讲述了拖拽放置容器的工作原理及如何获取拖拽文件信息。接着，详细说明了如何设计数据库字段、添加服务来存储上传文件的信息。然后，阐述了前台拖拽上传的实现，包括文件上传回调的处理和文件列表的展示。最后，提供了优化用户体验的建议，如在拖拽事件中改变容器背景色以增强反馈效果。

在实际案例中经常会使用到上传文件的功能，不过普通的上传文件需要用户再去一层一层查找文件的路径并不是十分的方便，今天给大家讲一种使用拖拽放置容器实现上传文件的方法。
在这里插入图片描述
1.拖拽放置容器
拖拽放置容器位于拓展组件中的特殊功能容器类，我们可以给它添加事件拖拽放置，此事件的动作中我们能获取一个返回值——拖拽文件，在调试记录中打印出来可以看到里面包含文件的名称、大小和类型等信息。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
不过拖拽放置容器只是把文件拖拽进来，上传到服务器还是要使用文件接口组件。文件接口上传文件动作的回调中会收到文件上传到服务器后的一些信息参数。
在这里插入图片描述
在这里插入图片描述
2.添加数据库字段
第一步我们要做的是设计后台的数据库字段，我们添加以下4个字段，name，type，size和url，分别用于存储上传文件的名

最低0.47元/天 解锁文章
使用ivx实现批量上传图片的经验总结
VXLab的博客
04-02 932
通常我们使用上传图片都是上传单张，在ivx中其实也提供了批量上传图片的功能，今天就讲一下批量上传图片的具体操作。 1.图片列表 首先需要用一个对象数组存储批量上传的图片，然后用for容器循环创建一个图片列表。每个图片后面都有一个圆框关闭的图标，可以将当前数据从对象数组中删除，当然这里的删除只是从前台的对象数组中删除。 2批量上传图片 然后就是图片上传的部分，这里使用的是文件接口组件读取多张本...
iVX开发中整理的常见问题与回答（三）
VXLab的博客
04-27 1502
ivx开发常见问题及回答
iVX开发中整理的常见问题与回答（一）
VXLab的博客
04-27 5170
iVX开发过程中常见问题及回答
七、功能性组件与事件逻辑（IVX 快速开发教程）
1_bit 的博客
09-09 2843
七、功能性组件与事件逻辑 由于 iVX 极度易用的特性，在 iVX 中开发微信小程序、Web App、小游戏应用的开发流程大致相同，介绍完基础可视化组件后通过后台的服务、数据库与事件结合即可完成一个应用的开发；此篇将会介绍 iVX 功能性组件与事件，包括微信小程序、小游戏事件。 ...
【iVX 开发 - 入门】UI 组件介绍及实操详解
商务合作 | 共同学习 | 携手共进
10-30 1万+
iVX 各 UI 组件的介绍，包含实操演示，快速掌握各个组件的使用方法。
使用ivx实现分页获取数据的经验总结
VXLab的博客
03-24 1117
在实际案例中我们经常需要展示一些数据，而这些数据都是存放在后台的数据库之中的而且可能数量庞大，在前台的界面中一下子全都展示出来肯定是不现实的，另外一次性让后台传输如此多的数据到前台也会有很大的延迟，使用户体验较差。因此，我们就需要采取一种分页的方式来少量多次的获取数据，这样用户每次操作之后都能很快得到反馈，同时前台也不用存放很多数据造成案例卡顿，今天就来说说如何实现这种分页效果。 1.组件结构 ...
使用ivx实现提交报名表单的经验总结
VXLab的博客
04-16 1098
提交表单是非常多案例中都会使用到的一种功能，例如活动报名，提交审核，问卷调研等等。其实它要实现的最终结果就是将前台输入的数据提交到后台的数据库中，今天以这个极简活动报名为例说一下提交表单的具体做法和流程。 一.数据库 这个极简活动报名中提交的表单中包含Name、Telephone、Have dinner、Session和Self introduction五项，于是我们在数据库中添加对应的五个字段...
使用ivx实现时间倒退效果的经验总结
VXLab的博客
04-26 1342
今天要实现一个时间倒退的动画效果，案例初始时会显示当前日期，用户可以从日期选择器上选择过去的某一天，开始播放后显示日期会逐渐倒退至选中日期。主要用到的组件是触发器，设计思路是将当前日期和选中日期都转化成时间戳格式，然后通过触发器不断改变当前日期的值，直到等于选中日期。 （Unix时间戳是一种时间表示方式，定义为从格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日0...
发布功能完成02《ivx低代码签到系统制作》
1_bit 的博客
06-23 4480
制作iVX 低代码项目需要进入在线IDE：https://editor.ivx.cn/上一节我们制作了后台的页面，那么此时我们应该需要制作发布功能了，那么在制作之前，我们应该思考一下如何制作这个签到内容发布的功能。首先发布签到的功能肯定是需要有一个数据库进行存储，这个存储那要什么字段呢？首先我们应该想到，需要先有签到名，也就是当前签到是什么签到，例如“***会议签到”之类的，那么此时我们创建一个数据库。点击后台，创建一个数据库命名为签到数据库： 添加了数据库后咱们在其中添加字段签到名： 那么此时我们应该想
API是什么？iVX中的API组件该如何使用？
deadlinefighter的博客
09-27 1217
API API组件图表 简介 API，即应用程序接口（Application Programming Interface，简称：API）。是一些由服务商提供或用户自主开发的预定义函数，它对程序内核进行了封装，仅保留数据的输入接口与用户进行通讯，并通过运算返回一个数据值。API的目的是在无需访问源码，或理解内部工作机制的前提下，赋予应用程序开发人员访问一组例程或进行数据通讯的能力。 iH5的Api系统目前可同时支持ih5内置api、用户自主添加的api。 【使用场景】 随着API服务接口日渐开放，我们可以通
iVX低代码平台系列制作APP简单的个人界面
热门推荐
码莎拉蒂
11-07 1万+
我们知道，目前市场上开发app或者小程序这些应用，都离不开一个个人界面，就是类似下面的这种界面，我们可以利用iVX低代码平台来开发，简单快速，如果还有不知道iVX低代码平台是啥的，猛戳这里:关于ivx当前，小伙伴还可以点击这里进去​​我们没花多少时间就开发出一个非常丝滑的页面，也就是不到10分钟，如果是原生开发的话，这个界面至少需要半个工作日时间，所以利用ivx能节省人力成本。
iVX是什么？
VXLab的博客
05-21 6313
iVX是什么？ iVX是什么？这些年来，我也不断的问自己这个问题？而且随着产品研发的不断深入，对iVX理解也在不断升级过程中，是工具？是平台？是语言？是云计算的发展方向？总之，不管怎样，只要你用着爽，能帮你解决实际问题，就说明iVX是有价值的，我们努力没有白费。 下面来谈谈我对iVX是什么的理解。 代码生成器/辅助开发和学习工具 你可以将iVX看作前端或者中台的代码生成器（这里我没有说后台，因为在iVX看来后台是连接IaaS层资源的相对固定的模块，iVX已经编译成DLL，供大家免费下载）。开发者通过iVX，
iview 实现复制功能
weixin_43784341的博客
06-02 841
iview 实现复制功能
1小时零基础赚一千，教你完成图书管理系统，不用打代码绝对学得会！[完整全站教学 IVX 实战第四篇]
1_bit 的博客
06-01 1万+
一、目标作品展示 ????小媛：bit 哥，bit 哥，又有人找我接单了，自从上次用了 IVX 接单后感觉我发现了财富密码。 ????1_bit：啥？你不会又想叫我帮你吧。 ????小媛：边帮边学，这样我也能进步。 ????1_bit：你又给了一个我无法拒绝的理由。 ????小媛：多谢 bit哥。 ????1_bit：这次做什么？ ????小媛：做一个资源共享平台，也就是记录一下软件、视频、图书文档之类的Web系统。 ????1_bit：行吧，是整个站点，完整的？ ????小媛：是的。 ????1_bit：
十、小程序实战 （IVX 快速开发教程）
1_bit 的博客
09-09 2663
六、小程序实战 使用小程序完成一个二手信息站点与 WebApp 实现流程类型，只是部分内容使用了微信小程序特有的组件，例如微信登录与 WebApp 略有差别，其它逻辑实现较为类似。我们先制作页面，之后再实现功能。 由于之前已经完成了一个 Web 站点的编写，在此为了节省阅读成本，同样重复的内容不再进行赘述。 6.1 完成小程序二手交易站点首页开发 首先我们创建一个二手交易小程序程序： 创建完毕后添加一个页面，作为小程序的登录界面。该登录界面需要授权微信账户直接进行登录，在此我们就不需要额外的登录页和注册页
二、文章发布页制作及后台实现《iVX低代码/无代码个人博客制作》
1_bit 的博客
05-24 7659
一、文章编辑页制作 当首页制作完毕后，需要显示内容就需要有文章数据，此时我们创建一个文章编辑页增加对应的数据。 那么我们创建一个页面，命名为文章发布页： 接着我们查看标题部分： 此部分为左右两边，左侧为标题提示输入和一个标题的文本输入框，右侧是一个发布按钮，此时我们创建左右两行： 由于左右两行需要在同一行显示，那么此时我们就需要设置左右两行的宽度为 50%，使其不占满超过100%的宽度居于一行，并且需要设置高度为包裹： 接着在左侧添加一个文本以及一个输入框： 那么右侧就是一个发布按钮，发布按钮更改
使用ivx学习开发通知和全局提示的经验总结
VXLab的博客
03-17 807
今天要给大家分享的经验是关于如何使用ivx创建一个通知的，通知就是悬浮出现在页面角落，显示全局的通知提醒消息，常用于：较为复杂的通知内容；带有交互的通知，给出用户下一步的行动点；系统主动推送。我依然使用官网来给大家进行分析： 1.我们先总体分析一下这个demo的结构： 这个demo的结构很简单，只有一个触发事件使用的按钮，和一个作为通知的横幅，横幅组件是一种特殊的定位工具，其可在滚动页面中处于固...
【iVX】数据库发布时是否需要选择同步数据
deadlinefighter的博客
09-27 699
【私有化部署时的更新】 为减少私有化部署时对后台数据同步与否的误操作, 将会对在应用导出前弹出后台数据库导出同步选择框, 如下所示, 勾选意味着导出的不仅有前端代码, 还有后台数据库里面的数据, 这些数据在自己服务器上执行 ivxbase 时会将生产环境下的数据覆盖, 因此每一个勾选都需要慎重再慎重, 如果是通过iVX的发布按钮直接发布, 数据的误删或覆盖是支持人工找回的(需付费), 如果是私有化部署以后的数据误删或覆盖, 则我们不支持找回(黑客也难做到). 【更新通知】 由于发布时同步数据的开关按钮.
低代码之间到底有些什么区别？对比编译型平台“iVX 无远 牛刀”以及接口型平台“明道 宜搭 简道 轻流 氚云 ”
troymeng的博客
11-20 4129
跟踪研究了很长时间，写一篇文章来和大家分享。 首先，我想说的是，大家不要对“地代码”“无代码”有什么偏见，这些都是技术发展的必然，我们只讨论发展的阶段和相关的技术，同时也为大家做好技术上和心理上的准备... 另外，我还发现当前学校教学体系（例如计算机相关学科）存在一个“核心矛盾”——高速发展的计算机和编程技术和落后的课程体系之间的矛盾。学习的东西都有用，但是有可能一些内容还没有毕业就已经过时了... 言归正传，标题我列举了一些相关的无代码/地代码产品，我把他们主要分为两类 第一类：编译型（翻译型），能实现.
怎么使用IVX的赋值方式，看IVX的API
最新发布
07-09
<think>我们正在讨论的是iVX平台（低代码开发平台）中的赋值操作和API文档查看方法。根据引用[1]和[2]提供的信息，我们可以这样回答： 1. **在iVX中使用赋值方法**： - iVX采用响应式数据绑定机制，赋值操作通常通过修改`this.data`对象下的属性实现。 - 例如，更新一个名为`count`的变量： ```javascript this.data.count = 10; // 直接赋值 this.updateData(); // 触发视图更新 ``` - 对于对象数组（如问题中的“数据库数据”），需要特别注意使用新对象或新数组替换原数据以触发更新（参考之前回答的不可变性原则）。 2. **查看iVX API文档**： - 在iVX编辑器中，可通过顶部菜单栏的“帮助”->“开发文档”访问官方API文档。 - 文档包含以下核心内容： * **组件API**：各UI组件的方法和事件（如按钮的点击事件） * **全局API**：`this.updateData()`, `this.batchUpdate()`等核心方法 * **数据库操作**：如何调用RestAPI操作数据库[^1] * **第三方服务集成**：AWS服务接口说明（基于引用[2]的后端封装） ### 操作示例：修改对象数组并查看效果 ```javascript // 步骤1：获取需要更新的数据（假设从API获取） const newProduct = {id: 103, name: "新产品", price: 299}; // 步骤2：更新到对象数组 this.data.数据库数据.push({...newProduct}); // 步骤3：强制渲染 this.updateData(); ``` ### 关键注意事项 - **调试技巧**：在赋值后使用`console.log(this.data.数据库数据)`验证数据状态 - **版本控制**：如引用[1]所述，可通过“文件->历史版本”回退误操作 - **企业数据库**：直接赋值仅影响前端状态，持久化需调用后端API[^1] §§相关问题§§ 1. iVX中如何调用RestAPI更新数据库？ 2. 为什么在iVX中修改了数据但界面没有刷新？ 3. iVX的企业数据库和本地测试数据库有什么区别？ 4. 如何调试iVX中的JavaScript代码？</think>### 在IVX中使用赋值方法 IVX采用响应式数据绑定机制，赋值操作主要通过修改`this.data`对象实现。以下是核心方法： #### 1. **基本变量赋值** ```javascript // 修改单个变量 this.data.变量名 = 新值; this.updateData(); // 必须调用以刷新界面 ``` #### 2. **对象数组赋值**（针对"数据库数据"） ```javascript // 完全替换数组 this.data.数据库数据 = [...新数组]; // 修改特定项 this.data.数据库数据[index] = {...新对象}; // 添加新项 this.data.数据库数据.push({...新对象}); this.updateData(); // 更新视图 ``` #### 3. **批量赋值优化** ```javascript this.batchUpdate(() => { this.data.变量1 = 值1; this.data.数据库数据[0].属性 = 新值; // 更多操作... }); // 自动触发单次渲染（推荐大数据量场景） ``` ### 查看IVX API文档 IVX官方文档提供完整的API参考： #### 访问路径： 1. **编辑器内访问** - 顶部菜单栏 → 帮助 → 开发文档 - 右键点击组件 → "查看组件文档" 2. **在线文档** 官方文档中心： [https://doc.ivx.cn/](https://doc.ivx.cn/)（参考引用[1]的文件管理说明） #### 核心API分类： | 类别 | 包含内容 | 文档位置 | |------|----------|----------| | **数据操作** | `updateData()`, `batchUpdate()` | "数据绑定"章节 | | **组件API** | 按钮/表格等组件方法 | "组件参考"目录 | | **数据库** | RestAPI调用、云数据库操作 | "后端服务" → "数据库" | | **动画控制** | Pixi.js/Three.js集成（引用[2]） | "动画引擎"章节 | | **调试工具** | 实时日志、错误追踪 | "开发者工具"部分 | > **最佳实践**：在编辑器中按 **F1** 可直接搜索当前场景相关API，文档包含可运行的代码示例[^1]。 --- ### 常见问题解决方案 **问题：赋值后界面未更新** ```javascript // 错误：直接修改对象属性 ❌ this.data.数据库数据[0].name = "新名称"; // 正确：创建新对象 ✅ const newData = [...this.data.数据库数据]; newData[0] = {...newData[0], name: "新名称"}; this.data.数据库数据 = newData; this.updateData(); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值