00:00
大家好,在上一节课给大家啊,稍微介绍了一下为什么要使用oss,以及怎么去使用对吧?那可以看到我们的这个API已经有这个,呃,现成的API能给我们返回我们需要的签名,那现在要做的一个事情就是说。如何让?这个上传组件让他去。和oss去配合起来去使用,也就是我们一点上传,就让他自己直接就传到oss啊,那这个要怎么去做呢。不知道怎么做,无从下手是吧?直接来看NT的手册找到。找到uplo的上传这里。你往下走。肯定能找到。嗯。嗯,就这么说吧,你想一想这个那个安design的,这是谁出的,支付宝出的,支付宝他们之前集团什么,阿里集团,阿里云是谁出的,也是阿里阿里云他们对吧,阿里集团那一个公司的东西,他能不集成进来吗?你往下找肯定有来往下找。
01:04
哎,阿里云oss,看到没有使用阿里云oss上传示例,诶直接就把这个事例的代码拿过来,我们改一改。就完事了,就是这么简单啊,所以说我们集成的话,其实没有那么那么大的一个困难啊。嗯。怎么来用呢?你先分析分析他的代码做了一件什么事情啊。啊,这个是引入图标,不用管它,这是引入这个uplo的上传组件,接着往下看啊,它是在这个生命周期中啊,就是当组件已经挂载完成之后,去执行Z加NT啊,那这个就是相当于一个初始化函数,初始化函数它干什么去发起一个请求,看到了吧,它是从Mo里面请求的,那这个请求呢,它会获取到,就是和我们这个API一样的一个配置,明白了没有?啊,接着往下走。然后把这个拿到数据之后,嗯,就是设置一下这个组件的状态。好,这个就不看了,接着看一看。
02:00
他这个Mo就是说模拟的这个这个这个数据啊,你看它模拟的这个数据是不是跟我们那API返回一样,这个我们就不看了,对不对啊,接着看这个on姐。他在这里面接收了一个文件的一个列表啊,就是当文件。你看这个清节你就知道了,就是发生改变的时候触发,那他认为是什么时候改变的时候触发的,就是我们在上传文件的时候,文件它不是说比如说一个机的文件啪一下就过去了,它得有个过程,它得啊,就是说比如说100K100K的,或者一兆一兆的,他得他得走。是这这么一个一个过程,就当文件在。上传过程中它发生了一个改变。就这函数就会触发清楚了吧啊。接着一个嗯嗯,这个remove,当我们移除文件的时候,触发的一个这个函数,接下来这个啊,获取这个呃,额外的数据,那这里面呢,其实就是。嗯,主要返回了这四个东西啊,这四个属性,这四个东西,这四个东西做什么的呢?就是我们组件上传的时候真正需要的这个东西啊,你看看他哪调用的。
03:05
肯定是在这个。呃,这个W的组件使用的时候调用的这里,你看没有把这个参数给到这个purpose,最后展开这个purpose给到他是不是啊,那这个。就说完了啊,接着是blo,就是在呃,文件上传之前,也就是我们选择完文件之后,文件上传之前。这个会被处罚,那我们一般在这里面做什么呢?在这里面我们要拿到这个就是oss的这个签名信息,然后比如说如果签名过期了,我们就重新调这个方法,重新去生成这个签名,对吧,你看然后比如说处理一下文件名等等等等,是做这么一个事情好。那来直接整个复制啊。这是最简单的一个方式,整个复制。复制之后干什么,我们自己新建一个组件,我们来想一件事情啊,上传组件,你不是说我们这这一个表单用完其他地方就不用了,呃,你其他的比如说轮播图,比如说广告位,比如其他地方你都要用到这个上传这个功能,那每个用到的地方你都你都这么整整个去写一遍吗?
04:14
对不对,那肯定不可能的呀,那既然是很多地方都会用到这个上传的这个功能,我为什么不把它给抽离成一个公共组件。啊,哪个地方你用到的时候,我就用这个组件不就完了吗?大家写代码一定要有这种组件化的一个思想啊,那既然是公共组件,我就放到这个cos里面清楚了吧,我在这里面来新建一个。目录,那这个目录我叫啊阿里云。嗯,Oss。嗯,Upload就叫这个了啊,然后我新建一个index。嗯。index.gs叉啊,组件组件我们用GS叉,还有这个命名规则再强调一遍,如果你在整个文件就是一个组件的话,啊,整个文件还是组件的话,那你文件夹要大写,然后里面的index这个I可以小写,对吧,如果你直接就是单文件的一个组件的话。
05:09
你这个文件名要大写,比如说你看看这里。它的这个小写,但是这里面它用到的一些这个这种单文件的这种组件是不是就不那么大写。清楚了吧,这是一个约束啊,好,我们创建了一个GSX的一个这么一个空白的文件啊。然后把我们刚才复制代码粘贴过来,接下来要做的一件事,什么事情,就是对它进行改改造啊,来看看怎么改。首先啊。是不是都没有引入,我先把引入过来。RA from。来,接着看啊。嗯,看看还有什么是。不要的啊,他这里你注意。它这是两个组件,看到了吗?它这是一个组件,一个class的一个类似的组件,它下面这里又定义了一个组件,而且在这个组件里面,它去用了这个自己定义的这个组件。
06:05
那我们有必要要这个东西吗?不要吧。对吧,我们可以在我们的这个添加的商品的这个表单里面,我们去调用这个组件嘛,所以这个不要啊。然后是他这边直接run那了,那我们也不用render了。对吧。但是这个组件我们是不是得把它要给默认暴露出去才可以export default。是这样的吗?嗯。啊,那我们这边只有把它给默认暴露出去,我们在其他地方才可以用,这是我们要处理的第一步,所以说把不用的也给删掉,Form不要的删掉啊接着来。看看还有什么要处理的。嗯,一点一点来,嗯,看这一步啊。备注,给大家写一下吧,初始化获取oss上传签名。就这个方法做初始化用的,获获取这个签名用的,明白了吗?而且他的签名呢,是在这个状态里面定义着的啊。
07:05
但是这个签名啊,他现在调的是他自己的这个方法,这个我肯定就不要了,我要它干啥呀。我自己调用我们的这个API才对呀,我们调这个地址得到它才对呀,是不是。好。嗯。啊,这下面这个文档下面给的这个前端直传的这个例子呢,是是GS的,是GS的一个例子,我们就不看了啊,接着改我们的这个组件,也就是说这个我们不能要了。啊。不能要了,那我们。敢去调用一个方法去获取我们的这个签名数据,是这样的吧,那这个签名就是现在要和服务器打交道了,我们要获取请求API获取这个数据了。我们是不是得在这个service里面去建一个。建一个文件啊,这我们就手建手动建立吧。我们建立一个,嗯,common.js,就是说一些公共的API,我们就放到这里面,嗯,把这个request给导入进来,Request from这个,哎,我们工具里封装好的这个接着exp。
08:15
嗯。暴露一个函数吧,三个弦。我们叫oss config,就叫oss的配置啊,那这里面发起一个请求,Return一个request。来看看什么方式的请求啊。Get方式啊,那get这个我就不写了,直接把地址写上also。你注意这是get的方式的话,我们就直接这么写就行好。这个就定义完了是吧,把这个注释写好,大家写方法的时候啊,就是不管写代码的什么时候,注释一定要写好。获取oss。呃,上传凭证啊策略。
09:01
和签名嘛,都给大家写,这边我们定义好这个方法之后,是不是在我们这个封装要封装的这个上传组件里面,是不是要用它,那就调用它这个方法啊,啊用它是不是得引入import。啊,因为用的是字面暴露,所以这么去引入从哪里呢?嗯,这个里面的。Service里面。Service里面的这个common啊,从这个里面我们来暴露这个方法,然后去使用。Input。再次。这个就不能累死啊,这个不能累。就是直接调外面的这个方法,好,这个我们来。测试一下,看看有没有拿到来直接logo。Logo。接下来呃,它是什么时候出发呢?你看就是组件挂载的时候会执行它,哎,会执行它,所以我们找个地方挂载一下这个组件挂到哪呢?就挂到添加商品的。
10:11
嗯。就挂载到我们刚才的上传那里,在哪呢。这这这是上传对吧,好,我们就把它放到这里。嗯,挂载这个组件啊。挂在这个组件好,那是不是得把这个组件给引入进来,你不能直接使用啊,Import这个组件from。Components里面的阿里云upload啊导入进来之后。就可以使用这个组件了啊,然后在它这个组件挂载的时候呢,就会触发我们组件里的这个啊this.ri it啊this.ri呢就会触发它,它呢就会去发起这个请求获取签名啊,并且加了这个think和wait啊,这样可同步的去打印出这个数据,我们看看这个签名到底有没有拿到。
11:05
来在这里啊,把我们的这个打开。重新刷新一下。没有输出对吧,因为组件还没挂载,只有当我们的模态框显示了,他才挂载,注意我们的输出是不是拿到了,而且拿到的这个数据。就是我们啊需要的这个数据啊,那我们把这个打印先给关掉,因为我们我们看这个文档的这个返回的结果都是一样的啊。来,接下来。继续去改我们的东西啊,接下来改什么呢?这里拿到这个配置之后设置,就是说设置一下这个状态,那这个状态呢,看在哪用的呢,是在这个获取这个额外的数据,这里把注释给大家写一下啊。嗯,函数的注释就是方法的函数的注释用这种。
12:01
初始化获取oss上面签名,接着我们用到了谁,就是这里面看,从这个状态里面获取这个配置,对吧?啊把它给。额外的数据啊,额外的额外的上传参数,这么写好吧,啊,因为我们把签名要作为额外的扫描参数去给使用,接着。呃,这块呢,本来是没有什么问题,但是有个地方要改。就是你要对比一下这里取的这个字段,就是比如说这个从这个配置里面取的这个字段是不是都是一致的啊,你通过这个和这上面的对比,你会发现。有一个地方不一样,就是这个access ID,我们这里是小写,它这里是大写啊,一般不注意的话,你这块就容易踩坑啊。清楚了吧,因为这个它文档就是官方我们复制下来的例子是大写,那但是我们实际上后台就是服务器给我们的API是小写,那这个要改一下,这是一块。
13:01
清楚了吧,嗯。啊,那这个就不写了。嗯。这个之后会给到谁呢?会给到。这里就是这个purposes啊。然后啊,这是域名啊,域名也是对的。就是z.oss host这个域名参数也是对的,是host。然后是我们的这个移除的这个函数。然后。文件上传中的一个事件,以及这个获取的这个额外的一个参数,然后就是说在上传之前进行一个初始化哈,嗯,那这个东西啊,当这个其实我们不太需要我们真正把一些。需要的东西我们来给他留下啊,就是说它是做什么,但你移除这个文件的时候会触发的一个事件啊,所以我们一般在这里面做什么呢?比如你移除了文件,我们要请求这个OS把你移除了的文件删掉,兄楚们一般是做这么一个操作啊,那我们暂时用不到就先先不用了,这个on是肯定要的啊。
14:09
这个是文件上传过程中触发的。嗯,垂角函数啊,上传过程中啊,注意这个过程,直到它上传完成啊,直到。上传。完成我直到上完成那。在这里面,哎,他打印了我们这个上传的这么一个状态啊好。嗯,按说是没有什么问题了,我们应该可以去测试一下了啊。来测试一波,把这个稍微小一点刷新一下。嗯,来新建,我们就测试这个上传啊。第二注意是这个啊,上面这个不是我们要要的,是我们这个,我们来上传一本书。
15:03
好。这边可以看到已经有这个结果了,对吧?啊不可点PPT,但是真正有没有上传成功呢?我们在这里来看啊。嗯,零看D0,这D0段啊,它的状态是up loading状态中,这是第一次。接着看下面。第二次输出还是看第零个啊,它这是一个文件的一个列表,注意它输出的,我们这里输出的是谁,你看一看是这个。嗯,在哪在这呢,是非有历的啊,所以我们在看到这个零这里面。那第二次呢?还是up楼顶来看最后一次。状态是不是就变成了,但这个是不是就上传完成了啊。那怎么样验证上传完成呢?也很简单,嗯。我们直接拿那个啊,这个我们oss的域名以及这个URL,我们去访问一下图片就知道了啊好,那这个域名呢。
16:02
刚才。我们有输出的,这个再来一遍吧,我们把它给刚才没有记没有记下来。好,没事啊,再刷新一下,把这个清掉。来接下来重新上传啊,这时候你看哈,我刚才是就是说主要是为了要这个域名,因为之前忘了忘了记下来了。那我们找个小本记一下啊,就在这个。再开一个吧,在这个里面,我把这个域名先给记上啊。好,接下来。选择文件啊,这个就可以清空了,选择文件来进行上传。选择一个书。诶上传我们直接看最后一个,那最后一个肯定是上传完成的一个情况嘛,你看这个单嘛,然后我复制一下这个域名,我把两边的引号删掉,然后我们拿这个,拿这个URL加,就说拿这个。文件的这个名字加上我们的域名啊,复制我们去浏览器测试一下,看看能不能访问,就知道我们有没有上传成功,来快车可以看到。
17:06
是不是?访问成功了啊,它是给我们下,就是说下载到了这个,就我们在浏览器中去访问的时候,他给我们下载了,那这个是阿里云的问题啊,阿里阿里云oss,就是说我们这个域名是用的阿里云的默认的这个域名,没有自定义自己的域名,当这种默认的域名使用的时候,我们如果在浏览器中直接访问图片,图片就会成一个就是自动帮你下载啊,就是跟这个请求的这个头部业务关系,嗯,来,我们去这个下载里面,其实就可以看到我们刚才的这个图片啊。啊,在这里面来,我们再选择这个文件,我这时候去点到这个下载给大家看一下是不是有这个图片。这是刚才我们访问访问下载下来的,对吧?啊,那说明已经上完成了,好但是。这个体验就不是特别好,我上传完成了,我还不知道这个图片,呃,长什么样啊还是什么,而且我这个图片你会显示这个附件对不对。啊,所以我还要去改一下,就是我不喜欢这个样式,那我们就去改一下他这个样式呗。
18:05
来找一下啊。看一下。我们复制这个阿里云OSSDEMO,只是为了就是更快的去封装,把这个阿里云给封装进来,那其实这个上传组件的样式你随便去调啊,用这种也行啊,用这种也行。清楚了吧?啊,用这种也行啊。对不对。啊。然后我们看看它这个是。嗯,加了一个,加了一个属性就可以了啊,就是。List type就是图片。就是下面这个图片列表的一个样式啊,啊,其实这个你去看API就可就可就可以看到啊,这个有一个类似的type。在哪呢?嗯。支持三种啊,Text picture和这个啊,我们就用这个picture。改哪呢?肯定是改这个purpose啊,是最终这个purpose传到了这个阿波罗的这个组件里面嘛,我把这个加上来list type,诶,我们使用这个picture。
19:09
啊,这个注释是不是没写,我们把那个注释写一写啊。上传之前就是选择文件之后,那上传文件之前啊,执行的这个回调啊,这个大家也给补上。回调。好,接下来我们加了这么一个purpose,就是list type嘛,我们看看我们的这个效果会不会改变来。清空新建,选择文件进行上传是第二个啊,第一个是我们之前的例子还没删除呢,等会再说。来。好效果是有了。而且这个。图片是不是也显示的出来。看到了吗?看到了吧,啊,那这是我们效果,包括这个,呃,这个移除也可以移除掉啊,接下来我们再来上传一下。
20:02
好,这是选择了这个一个,那我们再来选择一个。诶,下面又多了一个,但这并不是我们想要的一个效果。我们商品的主图只有一个就够了,所以是不是我们还得配置一个属性,就是控制你上传的时候始终用最新的去覆盖你上一个。清楚了吧,来看看找。第二个是不是限制上传数量,当唯一时,始终用最新的代替当前文件,把它给配置上,所以我们你需要什么东西,你就翻文档,文档里面基本上就会有。这时候我们再来尝试一下啊。小心点啊,这个先不用管它了啊。嗯,强制刷新一下。来新建。嗯,选择这个文件上传啊上传。图片出来了,对吧,但是。这个我再来一个吧,先给大家试试,等会再说,希望下一个问题是不是替换掉了啊,但是他会请求这个图片请求不到,那是为什么呢?就是它在显示这个预览图的时候。
21:08
嗯,就是我们点击这个图片可以看到是访问不了对吧。再给大家说一下,就是。他在图片上传完成之后,他会取图片的一个,呃,这个。啊属性啊,就是取这个URL来作为它的显示,但是URL我们明显发现它少了东西,是不是少了host的,没有没有host的对不对,这明显不完整,所以我们想问把这个host给加上好吧。这小节我们先停一下。
我来说两句