00:00
大家好,这节课我们继续对这个。上传,再做一些优化。啊,那虽然我们的上传已经可以正常的使用啊,但是呢,还是有些可以优化的地方,比如现在这个上传啊,并没有做类型的限制,你可以上传任何类型,对吧?当然这里没有其他文件,如果有这个VIP啊,或者其他文件都可以上传,因为我们没有做类型限制,对吧?那我们找到。这个。Upload这个组件它应该会有API,就是让我们可以控制这个类型啊,直接点到这个API这里。来,我们来找到第一个就是啊。这个是可以接受上传的文件类型,然后具体这个值怎么配置呢?让我们去参考啊,这个input a APP at tribu对吧?好,那不知道怎么配,我们先把这个参数给加上来,找到我们封装的组件。嗯,在这个。Src。这里。
01:00
啊,我们先把这个参数给加上对吧?啊,而且我们来想一下这个参数,咱不是说直接就在这去写死了啊,那如果你写死的话,其他地方你用到了这个上传的组件,那你怎么办?那我们这里是需要上传这个图片对吧?那如果还有其他的地方需要上传附件什么的,你就。没法用了是不是,哎,所以这里啊,我们把它给变成这个啊,从这个purpose里面去。获取就是让使用这个组件的地方通过purpose传过来啊,这样就比较灵活啊,啊,我们来接收一个这么一个东西,从这个purpose里面。但是有可能有的地方不传这个东西,对吧,所以我们这里再给一个默认值啊,就是说如果没有的时候呢,你就把它设成空就可以了,好那比如说。这是商品的。
02:02
添加是吧,我们找到啊。添加和编辑这里,然后。找到谁呢?就是使用这个上传组件的地方,我们把这个accept给加上好在这。通过这个啊,Purpose,我们把这个值给它传过去,但是这个值怎么设置呢?那我们就来看一看API了啊,刚才已经。说到这里了,让我们详情去参见这个input的这个啊。来,我们直接右键鼠标键打开。往下找到他的这个。属性啊,在这说呢啊说了这个accept属性啊,可以规定哎,限制我们上传文件的内容啊,然后这还简单的举了一个例子啊,比如说是你要嗯限制啊,只支持这个微软的这个word的话,你可以有这么几种写法,对吧。
03:04
啊,但实际上。就是说我们要传这个图片对不对,那怎么看看图片怎么支持呢。那这时候你可以点这个啊,点那个再看一看,他还给你。嗯。举了一个例子啊,这是单独。去看这个except的属性,这个时候他会给你举他的一些例子,对吧,你可以使用这个啊,比如说限制这个视频的,限制图片的啊。然后下面还有例子啊,所以我们限制图片的话,只要传这个就可以了啊,对吧,只要图片类型就可以啊。复制一下啊,粘贴到我们代码中。啊,这样的话,我们在使用这个组件的时候啊,这个属性通过这个purpose传到我们封装的这个组件里面,哎,这样的话就可以对它进行类型的一个限制啊,那这里是定义了一个泡泡常量嘛,最终都会就是说在这里展开给到这个组件啊。
04:01
啊,这个给了之后呢,我们来验证一下看一下。在这现在继续上传。那这时候只能上传这个图片类型的了,如果是其他类型就上传不了啊,比如说。啊,我去新建一个。啊,应该是在这个素材里面。我来随便。嗯,新建一个普通的文本啊。现在嗯,我再来上传。啊,这个文本是选不了的。那这个类型。就做了一个限制。那关于呃,这个就是这个accept属性。嗯,我们看的这个呢,就是按照它的手这个为API,我们一步一步的看到这个其实是原生的这个input的这个属性,对吧。啊,它接收什么呢?接收呃往下看,这例子也跟我们说了啊,这个是代表所有的图片对吧,但实际上你可能还有其他类型,这里稍微做一个扩展啊。
05:08
来看一下它这里面有一个简单的描述啊。你看这个标线的地方,呃,一个就是说唯一的文件类型的一个一个描述,那我们点进去,你在这看呢,它这里,哎,又给你介绍这个东西,介绍这个东西的时候,他又告诉你,又给你举了一些例子啊,比如这个是这个,比如说就代表所有的这个图片文件,对吧,那你看这一条呢,这一条就是说,呃,一个这个有效的mime类型啊,然后是没有扩展的这种。清楚了吧,好,那这时候你就。去查这个mme类型都有什么,然后就是给这个accept的设置就可以啊,然后还得要注意这个accept的多个的话呢,是以逗号分开啊。多可以多号分开,就是多个类型的话,多号分开,那这个。强调一遍啊,那接着呢,既然刚才我们说到啊,点击这里可以去。
06:05
看看我们所有可以设置的一个类型啊,那其中就说到了这个mime对吧,那他是做什么的呢?来。直接百度,然后去这个参考手册里面去看啊。你看啊。它这个是一个缩写啊,其实就是描述消息内容的,呃,一个因特网标准,那说白了就是说用字符串来描述。一个文件的一个类型,明白了吧,啊不管,然后你这是文档啊,或者说图像啊,音频等等等等,其实我们已经在很多地方接触到这个东西了,只是说你可能你没有留意啊,你接着往下看啊,所有的这个。支持的一个这个类型都在这儿。清楚了吧?啊,所以说你这个accept也是可以写这些东西的,那我为什么说其实我们已经接触了这些,只是没有没有留意呢?啊,回到我们的项目啊,那不只是我们项目,所有的这个网站请求都一样,你去打开你的这个network。
07:02
然后我们来刷新一下。看一下啊,这个是我们的这个请求啊,得到这个页面对不对,那你看看。这个响应的时候,它是不是有一个contain type,一个text对吧,然后接着你看我们发起请求的时候,是不是也有一个accept,然后啊接收这个text l,然后是这个APP叉al加L对不对,你看到这个东西是不是跟这个东西就很眼熟。是一样的嘛,对吧,那这个是呃,设置了,就是说我们在请求的时候,我们允许接受的一些类型啊等等啊这个东西就是。Mime这个类型的话啊,其实在我们使就是说使用的过程中还是比较多的啊。啊,当然大家不用记那么详细,每个都是干什么的,你用到了去看手册就可以稍微做一个。啊,说一些这个题外话啊。那。把这关了啊,我们的这个。类型的限制已经完成了,对吧?好,那接下来呢,再看一个。
08:05
嗯,比较严重的一个问题吧,为什么比较严重呢,就是说。虽然我们类型也做了限制。然后上传也好使了,但是有一个问题就是说这个表单验证不好使。对吧,好,那呃,这个验证它好使是因为。这个东西我们加了,就是说我们在它外面加了一个这个,并且加这个规则是吧,所以它会出来这个字啊,验证通过,但是当我们上传了图片之后一样的。这个它不会消失,知道吧,再提交它会验证,为什么呢?我们来看代码,我们加了这个东西之后,这里给了name,它会去验证。嗯。就是说input的一个name为cover,它的值是不是为空?对吧,但是这个上传到他上传完成之后。就是跟我们的这个东西并没有任何关联。大家能想明白吗?哎,就是我们在这里定义了验证的这个规则,你必须得验证啊,这个字段它不能为空,但是这个文件我们选择完文件上传之后。
09:08
就是他俩并没有关联上,它虽然在它里面包着,但是并没有关联上啊。啊。通过代码大家可以看一下,那我们来点开这个上传这里,你看看他的这个文件的这个引铺的啊,并没有说啊有内幕等于什么对吧?啊所以呢。也就是说啊,我们选择的这个文件,这个input,以及呃,就是他要做的一个验证并匹配不上,你看即使包括图片上传完成,你再点击提交都是没有用的。那我们再把这个问题给解决,也就是说这是一个很通用的,就是说很常见的一个。问题啊,当我们在这个表单里面啊,使用一些第三方的一个内容的时候,我们要验证这个表单的这个内容。啊,当然因为这是一个上传,所以会有呃很多的,呃,有几个办法去解决吧,那这里呢,我们选择一个通用的一个办法,好吧,为什么要选择这个通用的一个办法呢?因为选择通用的办法在我们以后。
10:12
碰见就是再复杂的问题,我们也能使用这个冲突办法,把这个问题给解决。好吧,好。我们来分析一下问题,我们我们要解决的问题是什么?就是解决这个验证的问题对不对啊,你在解决一个问题的时候,其实你能发现问题出在哪里,那问题已经解决了一半啊。好,那既然是出现在这个验证的这个问题上,哎,就是我们选择的这个值。并不在这个form的。这个要验证的这个字段里面。对吧,好,那我们就想,我能不能说我这个图片一上传完成,我就呃让这个。父母的这个。这个字段它的value设置上我上传后的一个文件的一个名字。
11:01
清楚了吧?啊,我们先来分析分析问题是什么问题产生的原因,刚才也给大家总结过了,就是我们这个表单验证,他要验证。它的值不为空。啊,就说必填是不是好。但是我们这个图片上传又跟他没有关联,所以说我们得想办法让我们的图片上传完成之后,把它的这个值给设置上,明白了吧,注意我的描述是图片上传完成之后,把它的值给设置上。叫什么?你如果图片都没有上传成功,你设置它没有意义。啊,因为那时候图片可能在oss里面还没有没有进行存储。好吧,啊。那接下来我们继续。继续推啊,往前推我怎么样。嗯,我先把伪代码写上吧,啊,首先找到我们这个组件,那既然刚才说了。啊,一定是在这个,那这个就不能这么写了,我再加个括号啊。
12:01
一定是在上传成功之后啊,上传成功之后。嗯,把这个文件的K。设置为。表单某个字段的值,某个字段的值,这样验证才能生效。清楚吧,我我为什么用某个,因为你不确定你要设置哪个字段啊,可能我们这里是叫啊这个cover,有的地方可能就叫这个啊非也有可能叫这个以麦体的都有可能是不是啊,这个我们笼统一下啊,大家先明白这个事情。那既然你这边表单啊,和你这边你要验证了,你关联不上。那我就。在文件上传成功之后,我就把文件的这个K啊的这个K给你的啊,某个字段把它值给你设置上,那这样的话。你一开始是空,你验证就说要必填对不对,那我把你的值一设置上,你是不是,哎里面就有值了,那你验证是不是就过了。
13:05
清楚了吗?啊。至于为什么要存文件的key?注意啊,你。数据库里存档啊,一般都是文件的这个K啊,这时候后端API再返回给我们的时候,它会自己连上这个域名,那为什么不存这个,呃,直接存这个文件的完整的地址呢?就是这个URL加上加上这个文件名的呢?好,那举个例子你就知道了,假如哪一天我这个oss域名我换了。啊,就是这玩意儿host的这个换了你怎么办?你去把数据库整个再写个脚本去更新一遍吗。对吧,所以我们数据库里存的一般就是这个K。啊,一般就是这个K,服务端在给我们返回链接的时候啊,返回图片的时候,一般会在服务端它自己就把这个URL连上K拼成一个完整的给我们啊,所以这块大家一定要明白,是文件的这个K啊。啊。嗯,接着说回我们的问题,对吧。
14:03
那我们已经分析到哪了。啊,就是说你俩关联不上对吧,那你俩关联不上,就是因为你要验证它,但是呢,它的值是空,因为你文件是上传文件啊,你选择文件啊,那你跟我这个没关系啊,对不对,那我就让你有关系,怎么样让你有关系,你上传完成之后,嗯,就是把这个表单的。某个字段的值,哎,比如说这值给设置一下,就是它有时候就验证通过了啊好。这边就是为了大家理解,我啰嗦了三遍了啊好。那接着我们来想一想,怎么?为这个字段去设置值,这是一个很关键的问题,就说怎么为这个表达的某个字段去设设置这个值,如果这个问题解决不了,那我们的这个。这个猜测啊,或者说我们的这个想法呀,那都比较麻烦了啊。来想一想,为表单的字段去设置值,它肯定会跟谁有关系,跟form表单有关系。清楚了吧,好,那这时候你如果能想到这儿,你就该知道怎么做了,那既然跟phone表单有关系,我去找这个phone表单,我去看看有没有能能用的东西啊,你去找找找找完之后你会发现。
15:11
发现啥呢?啥也没有对吧,但这时候你不要放弃啊,不要放弃,给大家说过这个pro components,它就是NTD的近一层封装。好,你这里面没有你这个。没有,那我去找。来找form。往下找啊,直接拉到API这。往下看啊。嗯,看到哪了。这是父母啊,父母它的这个API也就是嗯,我们能对什么呢。能对它啊进行的一些设置清楚了吧,你一定要看清API是谁的啊,因为有可能它的一些呃,子组件也有一些自己PI啊,接着一个个看呗,嗯,当你看到。
16:03
这个的时候,其实你应该就有一些想法,你对他怎么说是由这个form.use form创建的?这个form的实例。看到了吗?那。就是说我们使用这个form.use form就可以创建一个form的实例。既然有了这个form的实力,有了表单的实力,我们是不是就可以对这个表单啊进行。一些操作了,哎,比如说我修改某个字段值,来设置某个字段的值。有这个有这个想法没有啊,你看他的话。哎,我们就可以得到整个这个表单的这个实例啊,整个这个所有的表单的这么一个实例,我是不是可以对它里面的任意的字段去进行一些操作。清楚了吧,啊,这个这个能想到这里的话就可以了,接着至于怎么用。继续看呗,啊来。看一下啊,他。这么一般带这种柚子的话,都是这个都是这个后子啊。
17:02
呃,你先这个全局搜索一下,就是搜索它就在这个页面中去搜索,你看看这个页面中有没有用到的地方。比如往上它会有一些例子,可以通过这个form.use form对表单数据进行交互,看到吗?对表单数进行交互,你一看到这里其实就明白了,就是我通过它,我可以对这个表单的这个值进行设置啊,或者说是嗯,修改啊,这还给你举个例子,比如我一点它,你看把表单值给填充上了。清楚吧,你点开代码会怎么用来点开好。怎么用的呢?它是在这个里面啊,这呢,你看form.use form啊,这个hos,然后这是一个数组从里面解构出来这个form这种用法大家比较常见是吧?那我们在这个使用那个,比如说state state的时候,又state也是这么来的啊,其实很多后呢,它都会嗯去给你返回一个东西,是在这个数轴里面,你要你要解构一下才可以啊。啊,这是script,你可以点到GS看GS的代码。
18:03
呃,基本上大致都是一样的,嗯,往下它还会有一个。我先把代码给折起来。嗯。应该是在在这折叠一下啊好,这上面也会告诉我们,它是这个record ho的一个实现,只能作用于函数字组件。清楚了吧,那如果是类似组件呢,你的组件是类似的,你就看下面这个例子好吧,啊,那我们这个函数组件,我们就看它啊。啊。嗯,也就是说我们通过它可以得到啊,通过。这个。可以得到一个form的实例,得到这个form的实例之后,我把这个form的实例要通过这个form的这个form啊,这个purpose给它设置一下,这样的话,这个实例我们自自己得到,这个实例就和这个父母。啊,就代表了这个form吧,那我们就可以去操作这个表单。啊,对它设置值啊,修改值等等。
19:01
清楚了吗?啊好。那我们来使用一下。但是这时候。你看它这里是从这个form上面引入的,对不对,但是我们这里是。啊,这个我已经强调很多次了。他perform,它不就是父母的?升级版本嘛,对不对,你如果不确定不放心来找到这个,你CTRL加左键点进去。看看他有什么。它有没有这个use form对不对,而且这个use form就是谁的一个实现,就是nt LA form对吧,就是form里面的这个东西,甚至你点进去这个use form,你还能看到这个use form,它的这个返回值是不是一个form母的实例。看到了吧,而且是一个数组,是一个父母的一个实例。啊。来,那所以说那我们这里用的是pro,我们如果想要得到一个form的实例。完全是可以。
20:01
哎,使用这个per就是per来得到的啊。嗯,那我在这写一写啊,写到这定义。父母实例啊,用来自定义。用来操作表单吧,啊按照这个例子呢,我们应该是这么去定义的啊,Form啊和BG,我给个对象吧。就是这个我们的父母,我们表单对象等于谁?Pro form加use form啊注意它是个函数,好,这样我们就得到了一个form的一个实例,那得到这个form的实例之后,我要和这个进行一个绑定啊。找到这个再给他一个属性。Phone。哎,等于这个,那通过这个。
21:02
Form这个实例,我就可以去操作这个表单了啊,那怎么操作呢?不知道啊,来继续看。往下涨还继续往还直接点到API这里,那既然说呃,这个form呢是呃,由这个form.u form创造了一个实例。嗯。然后你看这这就是他它能使用的一些类型啊。这是form实力的一个类型啊,Form实例点进去直接。看这个,所以我们可以用到的一些API,也就是通过这个实例,我们可以使用这些方法,然后每个方法的嗯,这个作用都写的很详细,我们直接往下看,找到一个。Set value。设置表单的值,这是不是正是我们需要的?对吧,我们为什么这么麻烦,几经周折。然后要解决什么问题,不就是我们之前。这个问题吗?设置表单的某个字段的值。
22:01
对吧,那突然看到这里,你是不是。就豁然开朗。对不对,也就是说我使用这个。父母啊。嗯,我就先在这儿举例子吧,我使用这个form的这个。Set field value啊是一个函数,而且你要不知道它有什么参数呢,按照左键你可以点进去去。看一看啊。可以看到这个函数它接受一个Y6对吧,Y6呢,就接受这么一个参数,但是这个参数是这个类型啊,并且呃,没有什么返回值,那你看文档的话,这里会告诉你啊,接触一个啊values啊,没有什么返回值,那你这时候你还不知道它要接触什么类型的话,你把这个这个啊按controlr。左键按着康索左键点击,你就能看看他实际的一个一个类型,对吧。可以看到啊,它这边继承的是一个一个对象啊,也就是说这个参数呢,它是一个对象的一个类型啊,那对象呢,我们来想一想,我们这是做什么呢?就是设置。
23:09
表单的这个值。对吧,某个字段的值,那表单的值内一般是我们认为是K,然还一个value,也就是说KY6的一个结构,而且它要接受一个对象,那是不是我们得得这么去设置。那K呢,就是。呃,字段的这个名字。啊,所有的name,那值呢,就是Y6。啊,他是这么一个一个对象啊。比如说这里我要设置成什么ADPG等等啊这么一回事,那这个K呢,就是可能是我们的这个啊Co清楚吧,啊是这么这么去使用这个方法的啊,那既然我们找到了这个方法。啊,那。上传成功之后,我们就可以把。我们这个表单里面的这个call网设置成我们的这个K。
24:02
清楚了吧,好。那呃,这个是呃上传的组件,那我们是在这里面,这个先注释掉啊,我把。嗯,这块给大家注释掉啊。设置表单。的这个。啊,值啊。啊,就是啊,接着说,那既然我们找到了方法,也知道怎么去使用了啊,那不就看这个了,上传成功之后去进行设置,那我们是在这个组件里面,哎,这里去。这里去引入的啊,这个子组件对吧。啊,那么我们想要,呃,就是说想要子组件的这个数据。啊,就是的这个K。嗯。就是想要这个数据那。
25:03
这里面父组件我们想要子组件的某个数据怎么办?啊,是不是可以,呃,通过这个purpose,我们传一个这个方法过去,传一个函数过去,然后在子组件里面去执行这个函数,就可以把数据给带回来了。是这样的吧。啊。那我们来写一下啊。在这里面,我们来传一个方法。传一个什么purpose呢?啊,那我们的目的就是要设置这个表单的字段。对不对啊,那我们就直接。传一个。Set。Co啊K哎,就是设置它这个字段的这个K的啊。嗯,那这里呢,我们来定义一个方法set啊,一个函数。
26:02
对吧,接下来也就是说我们把这个函数传给子组件,子组件这边上传完成之后去,呃,调用我们传的这个函数。啊,然后把他得到的这个文件的K给。哎,传到这个函数里面,那我们在这个函数里面干什么呢?这个文件我们接收一个文件的K啊在上面来我们写到这里吧,那先把这个折叠啊。嗯,写到这个提交表单的上面吧。定一个名字等于。嗯,我们要接受一个非有K。接着在这里面我们做什么,是不是收到这个F,这个K之后,我们得调用这个方法。去进行嗯,字段的一个设置,对吧,那这个呢,就是还要给谁设置这个cover,那value就是这个F的K。
27:05
清楚了吧啊。啊,这是我们的这个函数啊,当然啊,这是我直接就写成简写的了啊,你们应该知道这个是参数啊,这个是呃,我们最后的就不要这个大括号了,这一行嘛啊。嗯,文件上传成功后啊,设置。Cover字段的这个value啊。只有这个字段的value被设置了之后,我们的这个表单验证才才能通过听懂吧,好,那我们来试一试啊。好。这里是传了一个set k,那我们这里上传成功之后,你要嗯调这个this.purpose里面的这个方法啊把。啊,费用里面的这个K传回去。清楚了吧,啊,因为我们的这个。
28:03
阿里OS这个组件是类似组件啊,所以得用this加purpose啊,大家呢在底下。可以做一个练习啊,就是把这个类似组件去改成函数式组件啊。找到我们刚才的这里啊,上传成功之后。调用副组件传过来的这个方法,那这个方法里面我们接收到文件的这个K,然后通过这个字段进行设置,这时候我们再来看一看我们的表单验证,是不是这个问题就解决了呢?那这个就相关了啊。第一步啊,直接提交可以看,请上传商品主图啊,那当我选择完图片之后。出现了一个错误啊,看看这个报错,你往下看。呃,你会发现这个是阿lo的,他报的错啊,我们来分析一本,这是什么错,那为什么?就是我在进行。
29:01
这个设置的时候对吧,往上一步走就是。为这个字段设置这个值的时候,会报一个。上传文件的一个错误。我们来看一看啊。这个是cover对吧。那这里也是卡。Form item,它包裹了谁?包裹了这个上传组件包裹了它,你如果仔细看过这个form item它的文档的话,它会。嗯。就是把它包裹的第一个啊子元素就是形成,就它俩之间形成一个受控,受控状态。啊,那么说的话。为什么会触发了这个上传的错误呢?那说明这个上传触发了。就是说啊,这个uplo被处罚了对吧,那他为什么被处罚说明。就是它和它形成了数控对吧,我们给它设置值,也就是它的值发生了改变,也就触发了input的N气事件对吧,当这个N7触发,哎,就触发了它的这个。
30:05
上传,但是上传的时候呢,实际上又没有文件,我们那是设置了一个值,所以会报错,那可能大家有疑问,为什么跟我刚才就是说大概一二十分钟前讲的说啊,他和他没有关联上,所以表单验证不通过对不对,其实并不是矛盾啊,虽然他俩形成了一个数控,但是。嗯,他的这个值就是费有你选择这个值,你你跟他就他确实是验证不到它明白了吧。啊,所以我们得通过另外一种方式,让这个只能被验证,而且还有一点是。这个上传的组件,我们的上传走的是oss。啊,我们真正要的值并不是说你选择这个文件,而是你上传之后oss的这个K,所以出于种种原因,我们就得自己去。啊,在这自己去。设置啊,这个字段的这个值明白了吗?好。嗯,那这是给大家解释一下为什么出现这个错。
31:01
就是。总结一句话来讲,我们在这里去设置这个字段的值,那这个字段它和谁又是形成了数控,和这个uplo的形成了数控,它的值被设置了,也就是这个它会呃认为这个就是检测到,诶这个比如说你你你自己脑补啊,有一个隐铺的太不是飞友完了一个安庆尼士电啊,我们把它只给设置了一下,然后触发昂庆姐,他就要执行这个上传嘛,上传又捕获不到文件,所以他在取这个文件的时候,就是便利这个文件的时候就会报错。啊,拿不到这个文件,文件里边。Feel。点UID以及费,这都拿不到。啊,这是这个问题,嗯,实际上手册上也有说啊,你去找什么呢?你找到这个点item。你看嘛,用于数据双向绑定,校验布局等,然后他有个地方会说。看看是哪个。应该是在下面被设置了内幕属性的item包装的组件表单控件会自动添加啊V6然后。
32:07
呃,这个on或者其他的属性,同时数据也会被form接管。清楚了吧?嗯。那这个问题解决了之后,就是说你你碰到一个错误,你要分析出来这个错误怎么产生的,就好解决对不对,那这个错误产生的原因是因为我们在设置的时候啊,它和它形成了这个这个这个这个数控组件,然后就是。它的值只要一被设置,这个上传就会触发。诶上传触发又没有文件,因为我们设置是一个K文件的K没有文件对不对,没有文件它就会报错。对吧,那怎么解决,我不让你形成这个受控的一个组件就完了呗。你注意它的特性是和第一个就是被包裹的子元素形成这种数控的一个一个组件啊,就是第一个子元素受它的这个控制,明白了吧,那我第一个子元素我不让你是uplo的,我随便给你加个这个啊,或者说呃,这个我加个其他的标签都可以,这样的话你看它的子元素是谁。
33:11
第一个就是子元素啊,不是孙子啊,子元素是谁,是不是div啊,它和div形成这个啊,这个就是div受它控制,那就跟这个up没有关系了。清楚了吧,那我这个时候我们就可以啊,就上传完成之后,去设置这个值的时候啊,去设置这个值的时候。就不会触发。那个一个input的on就不会上传这个,就是说呃,报出现这个错误了。清楚吗?来,我们再来验证一下啊,看波波一层以后还会不会出现这个错误啊,这边已经自动刷新过了。来A。我先点提交是吧,让我传商品的图片来,现在我选商品图片。上传成是不是验证消失了,再点一验没有问题。
34:01
看到了吗?啊,那我们来验证一下最终数据有没有被这个form表单提交到啊,非常好验证。嗯,看一下这个form表单最终提交的时候。会。嗯,走这个。Unfinish啊,就是它,然后会走到它对不对,我们在这里面去打印这个value就知道了啊,点log,那这些呢,就先注释掉,不提交啊,我们主要是看看。这个文件的K有没有被表,就是form表单收集嘛,就是我们这个设置的这个东西生不生效。嗯,来打开控制台。新建啊,那这些就是不能为空啊,他的验证通过我才能提交,我先全部随便输。你先随便说啊,主要是看那个图。来提交。哎,这是我们提到的子弹。
35:02
那看到这个cover没有,是不是我们文件的这个K。对吧,啊,那这样的话上传我们就。这个上传真正的就优化完了。那这小件听到对。
我来说两句