00:01
好,来下一个我们来做一下这个。啊,图片上传也是图片就是商品图片的一个管理。它其实包含了上传删除。你就上传完了,可以进行什么删除,就认了吧,啊认同啊行。我们用到的是哪个组件呢?上我们提过一下。Upload,而且用它是吧,在它基础上进行二次开发来看一下。嗯。现在是二次开发嘛,先把它复制一下看。复制到我们的。我们可以单独建一个组件来写。这个功能比较复杂。单独建一个主页。啊,名字呢,也跟他一样的啊。它叫什么?Pictures,翻译过来叫照片墙,它叫图片墙,这种效果其实挺常见的,我们来写一写。
01:05
建一个JSX文件。啊,名字。Pictures war。你们是多张图片吗?内容。直接复制过来了。那复制完以后呢,他缺点东西,大家看到他没有引入谁呀。需要什么?那。引入之后呢,我们可以进行,嗯,暴露。他这是直接渲染了是吧?给他暴露暴露,直接写在上面得了。Export是吧?那接着呢,我们在这里面是不是得引入,并且写成标签。
02:01
来引入一下。Import pictures from剪斜杠。有吗?有吧,有那下面写成标签去渲染显示一下。看看有没有一个啊,上面这个是吧。这个。嗯,好了,看看有没有效果。你说老师,证据做出来了吗?他肯定不是啊,只是有了一个界面效果而已。要交互,那大家想啊,他能知道我去上传到哪个地址吗?他肯定不可能知道嘛啊。所以首先要做的第一个事情,需要去看懂这些代码。
03:00
当然看的过程不是纯净的看,你得边测试边看,看看它有什么功能操作操作是吧?啊,比如说啊,我来再加一张图片啊,随便加一个。它是不是有个loading的效果啊。那。楼顶之后呢,这个地方它也可以进,它这两个操作就看着像像只眼睛是吧,实际上是个预览的一个效果,预览这个大图。那你说老师这个图片上传成功了吗,没有。他现在使用的BASE64对这个图片进行了一下处理。他没有真正去上传成功图片看到了吧,他用了BASE64去对图片进行处理,转化成一个文本,但显示还是图片是吧。啊,可以进行什么删除啊,可以进行删除OK。大概就是这个样子啊,这个里面呢,默认它这里面只能上传三张图片。
04:05
看了吧,你说老师我要是上四装怎么办呀?那肯定是里面有限制是吧,把这个限制改一改不就可以了吗?那你说下面的问题就是要看懂。啊,我们的这个组件,这个组件我们称它为什么呢?啊,用于图片上传的。组件。好,我们来看一下这个组件,它定义了一些状态。这些状态呢,你开始直接看肯定是很难懂的,你得看看怎么用。啊,先放的啊,这里面有很多自定义的回调函数是吧。主要看后面的render。Render里面,它首先外面整了一个div,还加了一个class,测试一下,这个class没什么用,这个去掉。好,包了两个组件,大家看一下,一个是阿的组件,是最核心的吧,还一个是什么呢?Model,这个model是哪个东西?
05:03
接着了。这能听到不就他。只是他把那个。什么东西隐藏了,大家看看。本来是不是有有去OK和取消这两个按钮的。现在还有吗?没了,那个是不是被干掉了。好,这一个还记得吧。控制这个word的显示什么隐藏的,那它的初始值应该是个什么值,大家看一下。是什么这个也就是说干嘛的标识是否显示大图预览对吧。这边。我没了。这个没问题吧。啊,这个应该是咱应该马上就能懂了啊,没什么问题。
06:02
这个比较简单,我们就直接先看它下面,这里面有个安康L点取消的时候需要干嘛去,还记得不?我们要是对它进行取消的操作,比如说我点击它,接着我们可以点这个遮罩部分,或者点这个叉叉进行关闭吗。要想隐藏得怎么办啊?太简单了,干嘛去?把这个值为什么。Course。这个13干嘛的?这个是不是隐藏我们那个model对吧,简单写一下。这个方法就没问题了吧,好,下面这一个这个里面最终是不是用来显示一张图片呢。啊,当然这张图片诶,就读到了一个状态数据。Preview image,而这个说明是大图的什么一个地址吧。
07:02
这都没听懂。啊,就是。大图的URL吧,简单写一下,大家开始有吗?没有,后面是不是要给它一个值,你才能显示是不是好没问题。啊,在这个。来。看看这个,这个大家大家能懂,这里面有个数组fair fair是指谁啊,哪个fair。说白了就是imagine。能听到吧,啊也就为什么默认上面显示了一张图片呢。是不是就因为我这个数组里面有一个对象,这个对象里面是不是有些特别的属性啊,什么u ID name和UI这个名字不要随便写啊。等会,我们等会可以来看。好,就是这个,看看up。看下它。好了啊,首先来看action,大家觉得action里面干完了。
08:03
上传图片是不是得需要一个地址的,这个地址得写我们特定的吧?那写哪一个。那就得去看接口文档,我们最终上传图片是不是需要的一个地址。实际上是他吧。这个我把它写过来,前面的技术路径不要写啊。能看到吧。基本路径那里面本要通过代理来帮我们转89的。这也是需要我们前面这部分为什么不写什么大呢?我这个也不能写无线。嗯,他是已上传图片,最后也是发了一个价请求。你发现个价值请求,你不你要直接写一个5000,那就是一个什么。就是虽然说这个不用我们亲自发请求啊,不用我们亲自发,但最终他也是要发呀,对不对。
09:03
啊,这个时候需要利用我们的那个代理服务器帮我们去转发。只要写后面的地址就行。来我们可以看一下我们这个接口啊,来看好了,这一次大家看到我写的是这个。这相当于是个带文件的表单,好。大家看看什么请求,那肯定是破损请求,这必然的,你上传文件不可能是get是不是好这个地方我们左边代表的是我们需要提交的一个参数名吧,名字叫image啊,这是后台规定好的,定好的,下面这右边我们干嘛去?是不是选择某一张图片了。选择一张图片来啊呃,我这里有图片的,比如说这个吧。举个例子啊,现在我是不是选中了一张图片呢?它这里默认只显示了一个图片的文件名,接着干嘛呢?
10:00
点击的就会把这张图片上传到服务器端。啊,算了,不会了,来我们看一下,我们选择一个。呃,我来看一下啊,我能记住这个这个图片。嗯,记住一张图片这个。嗯。就这个吧,犀牛苏,我们来看一下啊。好,记住啊,我们上传的犀牛书,我们等会去后台看一下,看看图片在不在,好点击什么呢?剩的发送。是不是stay还是你?说明上传成功吧,而且把相应的数据给你什么。返回了有哪些数据呢?首先你那个生他们后台肯定要把这个图片保存吧,那保存的话是不是一个图片文件名有吧,接着是要有一个访问的一个地址吧。而这一个地址,咱所以说咱都不用从后台去看。
11:02
我只要能访问到。是不是?是的吧。对了。嗯,那这样的话啊,我们就说明这个接口是可用的是吧,可以用的好。记住啊,我们提交的这个文件,它需要有一个参数,名叫image,这里面并没有指定。它的这个里面并没有指引,那我们得去看。通过哪个属性来去设定,这个时候得去看接口文档,你看例子是很难看的。啊,这个接口文档里面呢,说了很多东西啊,我们来看这里面说一说啊。他用的是我们看一下。我们把它过一下吧,有的地方这一个。这一个说的是我们能接收哪些类型的文件,大家注意观察一个现象。
12:01
啊,关照我们的,我们现有的和他的来注意观察。嗯,有一个有一个什么事呢,你看我现在是不能看到任何类型的文件,这样好吗。这样不好,应该只能看到谁比较好了,只能看到图片,这里面能看出来是因为这个文件只有图片。听懂了吧,而我们的这个应用,我们最终的应用。来,你随便打开一个。你能看到别的文件吗?你都整个看不见,你现在是不是只看到文件夹,为什么是我这里面只有文件夹吗。不是,是因为他只能看到图片,这样是不是避免用户选错呀。因为你不是上传图片吗。是不是,那这个怎么做嘞。这个地方也很简单。就是指定这一个属性。
13:02
我接收哪些类型的文件?这能听到不?那哪些类型的文件呢?这是个字符串类型,我也不知道啊,那这这这里没写啊。那我应该怎么做啊?是不是他说只接收上传文件类型详见这个地址啊,那得了,那我应该把它是不是打开啊。打开,那我们就去看能接收哪些位置,这怎么写,主要是那个指定的格式能怎么写。诶。就有一个这个。能听到吧?这个表明什么意思?他说。首先是图,就是心,什么意思?任意类型的那个图片不止一种格式吧,比如说有PNGDG。等等一些图片类型是不是,那我们就说明我们是个什么。
14:01
串我们这边是什么意思呢?是指定指什么接收图片格式对吧。是不是避免用户犯错误啊?好,这一个是什么。上传图片的接口是不是地址?这没问题吧,没问题,好这一个是一个什么东西呢。叫type,我们来看一下啊,后面他还有一些别的啊,还有一些别的这个显示那个例子刚才说过了,这个呢,我们不用管它。刚才有一个有一个什么来着。Next time。啊,这个list type,它说有几种,有这么几种值,其实就是说它有几种样式效果,我们现在是不是选的这个呀。这是一个图片卡片格式的,就是每一张图片大家看着是不是都是一个卡片的一个样子。
15:02
啊,你来看我换一下,我换一个这东西你就懂了,比如说我换一个换一个他吧。你看会是个什么样子?就是样式不一样。你看我们现在是这个样子的,这是以上的图片。还是我感觉这个效果是不是比较好啊。能看到那张绿儿的图片大小图片嘛,这明显要好很多,对不好,但并不是所有应用都需要啊,可能有的应用就需要简洁一点。对,不好。还有一个这个。Name指令发送给后台的文件参数名默认是什么名字?Feel,而我们需要的是什么名字呢?Image,所以这个必须得指定,你要指定后台得不到数据。
16:01
所以我需要去指定什么。Name属性。等于什么呢?Image,这个是请求参数,什么名?这个能不能请求参数名额,参数值就是这个文件,就是这个文件数据。这个刚才说过,这个没错,这是一个卡片格式,对吧。卡变压式。那这个。这个用来指定所有已上传图片文件对象的数组。当然你也可以去看他这不有fair么?已上传文件的什么列表。
17:01
对吧。这个不懂啊,已上传文件的列表,列表不就是数组吗?下面这里面有接着是不是有两个。监听的回答对吧,咱们两个监听,一个叫pre。The angry的回调函数什么时候出发?大家看看看安干了什么事情你就知道了。这个地方最重要的一个就是干嘛。指引他更新这个状态。是不是显示那个,这个是用来显示大图去的吧,显示。指定的指定费对应的大图。那这个是不是代表了某一个图片文件。也就是说我们刚才不指定了一个fair list吗?那它就会显示这个fair里面所有feel所对应的图片吧,开始显示的是个缩略图,是个小图,接着我一点它就会触发。
18:09
这个啊,你想证明这件事情很简单,只需要到哪去啊,是不是这里面写些打印输出。就能看出来。我把这个打印一下来看一下。注意观察啊,这里面现在没什么东西来点它一下,点是不是打印了那个feel是谁呀,大家看着不就是刚才指定那几个值吗。Name是status u ID和U,哎,下面就要说了,这些都什么意思是吧?这个看名字大概都能懂,这一个UID就相当于ID每一个费。都应该什么?有一个唯一的ID了吧。每个贝尔。
19:02
自己唯一的ID,而且文档上他再说了一个事情,说了个什么事呢,他希望你。初始指定的时候啊,把它指定为,如果需要离指定需要指定为一个负数,这个看一下。嗯。表单上传图片。啊,下面会有一些说明,大家看到这里面不有UID吗?文件的唯一什么标识,建议设置,为什么呢?附属防止和内部产生的ID什么冲突,也就如果这ID由你自己来指定,那你最好指定为负数,这样就避免跟它自动生成的UID。啊,避免重重复。就在那个意思。好,当然如果不是离子定的,你就不用管它,首先你就知道它是个唯一的标识就行了,这个很简单,这是图片文件名是吧?图片文件名没问题,这个诶这很重要。
20:11
这个是图片的什么呢?状态?那就要说一个事情了,图片有哪些状态是不是?这个状态代表什么意思呢?哒哒,什么意思?可不下载。12个档下载。这段呢,是do的完成时吧。Do完成什么意思?Do?就看是做对不对。那当然。已完成什么事情,已完成上传,也就是说这一个大代表是已经上传的图片,能懂吧,已上传。那有已上传,应该还有别的状态,那到底哪些状态我哪知道呢?
21:02
这个地方是不是得去看它的这个状态的情况啊,嗯,来看有没有A这个地方,这不是有吗。这就来了是不是啊,这个statuss大家看一下有这样一些状态,有up什么。这个应该正在上传中,对吧,正在上传中,刚才大家看到这个上传是不是有个过程的啊,一过程的好,这个error是代表错误,这个暂时不用管它,看这个。这我们常用的三个,这个代表什么?已删除。这能听到吧,啊把它删除好。那直接在这个年度肯定是当反。因为这里面说明的是已上传的所有图片列表嘛,好,这一个URL呢,那就更简单了,是是这个图片的什么是不是地址啊,图片地址,到时候拿着这个地址是不是显示一个大图啊好。
22:06
来有了它以后,下面我们要说一个事情,这个更新状态什么意思,显示大图,记得这啥意思哦。首先默认是不是取菲尔的URL显示。如果它的UI没有值了。是不是选这个属性,他选另外一个属性去显示这个里面,就是说为什么刚才这个地方其实就是很简单一个事情。刚才吧,我这个图片根本就没有上传成功,所以根本就没有产生什么URL。听到了吧,但他确实能够去显示。它因为它默认加了一个属性叫设UR,而这个值呢,它指定位了一个对应的,实际上就是那个图片的倍六四变化一个串。这拿出来显示。听懂了吧,也就是说即使你没上传成功,其实它有一个默认的显示是吧。
23:02
啊。好。就是这样一个事情啊。大家能懂吧。啊,其实基本的过程。差不多了,这一个还有一个,这个还change,这个on change什么意思,是不是当发生改变的时候。调用这个方法,我们来看一下这个方法,这个方法有意思,这个方法里面要写大量代码。所以。我们这么干诶。啊,应该把这个括号括起来。后面我们要出重点的事情都在这里面做。好。我要在里面写一个打印输出。好,这个这一个这一个是个回调函数,我们说过回调函数接收什么参数,不是我来定的吧,是他来定的,至少看出来现在是不是接收A,我问大家这个接收的应该是个对象吧,我对象里面有一个属性叫什么?
24:06
Fair,这个是用来干嘛的?是所有啊已上传图片的什么?那个速度。这个一看就能知道所有已上传图片的什么速度。好,图片文件的数组二图片文件的数据,其实这是文件对象,这是一个一个的对象,信息对象,除了它其实还有一个属性,还有还有别的属性,那我怎么知道有没有别的了。嗯,看文档,在文档里面其实会说除了有fair的,还有什么fair fair就当前操作的一个图片。还有英文,英文指标这个有用,这个后来用。那你说我可以这么写对不对?而这个费代表的是当前操作的图片文件,记住,当前操作可能是上传,也可能是删除。
25:08
对不对。因为我们有上传和删除两个操作呀,对吧。啊,这个有用,什么时候用呢?删除的用,因为删除的时候那个被删除文件这就没有了。而在这里能看到。我想看到删除的文件,就是要看这个费用。啊好,大概有个印象,来我们来看一下,看一下这个有没有值。打印输出一下,打印输出一下都行,可以吧,可以好来观察一下现象。好,还没有啊,我们还没做,来试一下。试一下。来,走里。
26:00
大家看看现在是不是掉了好几次啊。掉好几次的原因是什么?大家注意观察,注意再注意观察一下啊。它是不是有一个上传的过程的,说白了这个按全景,它是不是在监视这个上传的过程。它只调用一次吗?不是它会调用多次对不对。认不那多字,那我就说了一个事情了,那我刚刚说了,这个代表的是当前参考的文件,比如说我这个feel,它一个很重要的属性叫status。我就看这个field了啊。放这个大家注意观察一下就能知道了,看好了。大家看看先是uploading uploading,最后什么?啊。能看到吧,啊当当啊,这最后才当嘛,前面是不是正在上课中。
27:06
能不能看到来,那它这个文件里面都有一些什么信息,我们可以看过来看一下啊,当然信息很多,但是有几个重要信息。我们来说一说啊,首先我们一个field对象是不是必须有一个UIE。这是它内部自动生成的。内部生产的肯定不会冲突。用它就行好,我们不是还有内的吗。之内,这一个虽然说也是不会唯一的,但是有个问题,我的这个name保存的不对,为什么呢?你来看一下我们的network你就知道。其实我们现在上传图片已经成功了。它真正的内部是这个,知道不。这是我上传图片的文件名,在后台保存的名字,而你它自动保存的这个名字。
28:00
而它自动保存了这个名字,哎,刚才在这里应该在这啊。是不是这样一个名字?这对吗?不对,这个不好。我得是不是改成我自己的名字。能不能听到我得最后得改成我自己的名字。好,比如说啊,还有一个很重要的。大家看好了。对。Response。这是啥呀?这不是响应数据对象吗?是吗?这不就是我们平常说的那个吗?是不是这是我的数据吗?我们刚才说那个name是不是保存了不对,那保存不对,是不是得换成我们的这个值。那你要得到这个值啊,是不是。大家懂吧,还有一个啊,还有一个就是我们的非对象还需要有一个属性,很重要的属性叫什么。
29:01
URL,而在这个里面,满眼看去就没发现。能听到不?这能理解吧,没有发现,那所以说我是不是要给这个对象添加一个什么。URL添加一个URL,而URL呢,从哪得嘞?是不是respond me就可以去?嗯,Response里面就可以取到。啊,就是这个。啊,最后啊,注意它在改变的过程中,它会不断的去调this.s去更新谁。是不是更新那个在,嗯,操作过程中,这个操作过程可能是上传一个什么。下载。不是下载删除啊,过程中啊及时的,嗯,过程中更新这个feel的状态。
30:06
哎,我要问他你看啊,如果我不写这个,我不掉这个,你看会怎么样,大家注意观察一下。这写开一张图片没问题是不是你看。十张图片已经上传了,但他这里没有显示,对不对。那是因为你没有去更新哪个状态啊。Fair,也就是说现在啊,如果一旦上传了以后,大家需要去知道我现在的这一个fair点,它会有一个什么呢?有一个变化的。这不说的是我们所有以上的图片的一个数组吗?那如果我们现在去观察打印信息,大家注意观察一下啊,来走一把,现在那个认识应该为二。看见吗?我再来一个,先认识应该为什么三那如果你一直不更新。
31:06
你说是个什么问题,那我的那个状态是不是老是只有一个元素啊。也就是我的feel。你不更新嘛,那不本来就老在这物业吗?是不是,所以在上传的过程中,是不是需要对它是不是进行不断的更新。但界面从而逐渐得到渲染。好,这个。就大概我们。熟悉了一下这个代码啊,那下一步我们就要去真正去写功能。
我来说两句