其他分享
首页 > 其他分享> > 1V1手把手实战教学,微搭低代码中如何上传图片

1V1手把手实战教学,微搭低代码中如何上传图片

作者:互联网

低码的教程已经创作了230多篇了,日常其实和粉丝的互动非常少,总是我自顾自的写教程,然后自顾自的发表。有时候没有反馈其实不知道教程写的如何。这不,有个热心的学生加了好友,他也积极的反馈教程写的问题。其实有时候技术的提高也在于教,以教促学就是互惠互利的事情。

粉丝:韩老师,如果要上传大量的图片,图片地址还需要存放到数据库里面,这个微搭把图片上传到哪里了?

韩老师:一般你开通了环境之后可以看一下其实是有几个指标的
在这里插入图片描述
指标解释:

指标名称指标解释
应用数量基础版可以创建50个应用,每个应用可以是小程序、H5或者PC,每个应用都有一个单独的ID,访问的时候是通过域名+应用ID来访问的
COS存储这个就是存放附件的地方,可以理解为自己的应用的一块硬盘,里边既可以放图片也可以放文件比如excel、pdf、word等
数据库容量一般我们表单收集到的数据是放在数据库里的,如果数据量比较大就需要升配
CDN流量用户使用域名访问你的应用,不管是访问页面也好,查看数据也好,访问图片也好这些都需要使用流量,用超了就会禁止访问,日常这块是需要仔细规划的

粉丝:了解,还是您给解释的明白,要我自己确实琢磨不明白这些概念的,老是混淆

粉丝:那这个图片上传是需要自己写代码还是可以有现成的组件呀

韩老师:微搭已经考虑大部分人的使用场景了,封装了一个非常方便的组件,叫表单图片上传组件

粉丝:老师快告诉我怎么用,我已经迫不及待想实践了,不用写代码,直接就可以上传图片想见就很美

韩老师:收到,这就来

要想实现图片上传,我们一般需要做几个步骤,第一是需要创建数据源,因为你上传的图片最终要存储到一个地方,不仅需要存储后续应该还有展示的场景,这也是和数据库分不开的。

那如何创建数据源呢?打开控制台,点击数据源菜单,我们选择自建数据源
在这里插入图片描述
新建数据源是需要输入数据源的名称和标识的
在这里插入图片描述
数据源建好了之后我们需要增加一个图片字段用来存放图片
在这里插入图片描述
需要输入字段的名称和标识,类型的话我们选择图片
在这里插入图片描述
数据源增加好了之后,我们就需要创建一个空白应用
在这里插入图片描述
输入应用名称,我们选择第二个类型
在这里插入图片描述
然后创建一个空白页面
在这里插入图片描述
在这里插入图片描述
这样基础工作就搭建好了

粉丝:韩老师,我增加了一个图片上传组件,但是发现没有上传按钮啊,怎么把图片上传上去呢?
在这里插入图片描述
韩老师:其实使用组件开发和传统开发还是不一样的,首先我们需要建立一些概念。就好比你现实中要烤蛋糕,这个组件相当于蛋糕的磨具,我们按照配方把鸡蛋、面粉、水倒入模具。现在蛋糕是个生胚,那么我们如何得到一个烤制好的蛋糕呢?这个时候就需要我们把蛋糕放入烤箱,然后设定好温度,接上电源这样就可以等待蛋糕烤好了。

粉丝:那您的意思是我现在只放了模具,没放进烤箱里,那这个烤箱是指啥呢?

韩老师:这个烤箱就是指表单容器,需要烤什么东西就要加入到烤箱里

粉丝:可以演示一下怎么操作么?

韩老师:好的,这就演示

我们先在页面中添加一个表单容器组件
在这里插入图片描述
它的内容插槽就相当于我们烤箱里的空间,可以放置具体的食物,我们现在放一个表单图片上传组件,放置的方法是先选中内容插槽,然后添加组件
在这里插入图片描述
在这里插入图片描述
这里需要注意的地方是表单图片上传组件的字段绑定,直接填写我们数据源的图片字段的标识即可,我们这里填写tp
在这里插入图片描述
粉丝:但是还是没有出现上传按钮啊

韩老师:不要着急,我们现在只是把蛋糕放入烤箱,还需要接通电源并且设置好温度和时间,这几歩如何操作呢

我们需要在表单容器上设置,选中表单容器,表单场景选择新增记录,数据源绑定为我们刚刚创建的数据源方法选中新增记录,这样就设置好了
在这里插入图片描述
看提交按钮出来了吧,这个时候你上传图片就可以提交成功啦,懂了波?

粉丝:还得老师指点啊,我自己琢磨了一晚上怎么也不成功,这一下懂了,谢谢老师。

韩老师:不客气,有啥不会的记得问我

同学们,本次的实战教学就结束了,我们来回顾一下,我们本次主要讲解了图片上传组件如何使用,包括如何设置数据源、如何创建应用、组件的设置。低代码作为一门实战技术,还需要结合自己的需求不断的进行实践,在实际操作的过程中理解各种概念,慢慢的你就掌握了。当然了,学习过程中如果能有老师1V1的提供技术指导,无疑是一件事半功倍的事情,如果你需要,正好我还会,大胆的联系我吧。

标签:韩老师,手把手,表单,组件,数据源,微搭低,上传,1V1,图片
来源: https://blog.csdn.net/u012877217/article/details/122489769