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

Posted 2022-02-06 低代码布道师

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

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

韩老师：一般你开通了环境之后可以看一下其实是有几个指标的

指标解释：

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

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

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

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

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

韩老师：收到，这就来

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

那如何创建数据源呢？打开控制台，点击数据源菜单，我们选择自建数据源

新建数据源是需要输入数据源的名称和标识的

数据源建好了之后我们需要增加一个图片字段用来存放图片

需要输入字段的名称和标识，类型的话我们选择图片

数据源增加好了之后，我们就需要创建一个空白应用

输入应用名称，我们选择第二个类型

然后创建一个空白页面


这样基础工作就搭建好了

粉丝：韩老师，我增加了一个图片上传组件，但是发现没有上传按钮啊，怎么把图片上传上去呢？

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

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

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

粉丝：可以演示一下怎么操作么？

韩老师：好的，这就演示

我们先在页面中添加一个表单容器组件

它的内容插槽就相当于我们烤箱里的空间，可以放置具体的食物，我们现在放一个表单图片上传组件，放置的方法是先选中内容插槽，然后添加组件


这里需要注意的地方是表单图片上传组件的字段绑定，直接填写我们数据源的图片字段的标识即可，我们这里填写tp

粉丝：但是还是没有出现上传按钮啊

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

我们需要在表单容器上设置，选中表单容器，表单场景选择新增记录，数据源绑定为我们刚刚创建的数据源方法选中新增记录，这样就设置好了

看提交按钮出来了吧，这个时候你上传图片就可以提交成功啦，懂了波？

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

韩老师：不客气，有啥不会的记得问我

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