霍常亮淘宝客app开发系列视频课程第28节：如何选择_上传_删除云存储原创

哈喽，大家好，我是霍尚亮，那这节课呢，我们再补充一点啊，就是关于这个云存储，那么我们在之前呢，已经给大家讲过，对吧，你在这里比如说云存储，我想增加一些图片，你就可以把它当成一个百度网盘去用啊，你点击详情，然后你就可以看到这里的地址，把它复制之后。在这里粘贴就可以进行正常的打开啊，那这个东西呢，你在哪调用都可以，那么我们去使用的时候在写代码中啊，咱们假如说就想把这张图片给它嵌进去啊，该如何实现？那么我们现在呢，找到啊，这个咱们就不用在这个。云函数里面进行写了，我们把它可以先关掉这个文件夹关掉，然后我们再配置，可以在这个里面进行写，对吧？找到会有啊在这里面呢，可以填充一些图片啊之类的，我们在这，呃，下面是一个按钮，这个是咱们的按钮，对吧，咱们在这下面进行写。

调用云存储的图片啊。之前我们讲过标签图片标签。那么在这里我们如果说。直接选择本地的对吧，我们就直接把本地地址写在这里出来的就是它，那么我还可以呢，把咱们刚刚复制的这个。长的地址吧，就是咱们这个云地址，我们保存到这里，然后保存。对吧，它也会在这里进行展示，然后呢，这个之后也会变形呢，这个就是咱们一个分辨率的问题，你可以在后期再进行，根据咱们的class啊，再进行调整一下它这个啊不射偏率就是这个调整一下那个高和宽啊。

比如说我们在这儿可以再加上一些啊分辨率之类的，这个呢，就是老生常谈的话呢，咱们就不演示了，之前关于这个克拉斯呢，已经说了很多了啊。啊到这儿呢，都是比较low的啊，我们先把它屏蔽掉，为什么，因为我们都是手动先在后台啊，咱们现在。现在这上传了，然后我们才调用的对不对？那么我们将来在写APP的时候，举个简单的例子，你想让用户设置一下头像，对吧，人家可以在手机里边选个头像，然后上传到你的服务器，然后再对应的位置正常展示，这个功能很常见吧，那这个时候我们不可能说，诶哥们，你把你图片发给我，我给你上传到我的服务器，然后再如何如何，你累不累不可能，对不对，所以说我们都是有一个自动化，让用户选择，然后直接到你的服务器。

对吧，那么这个其实后我们该如何实现这个功能。我们看一下这边的一个存储云数据库，基本在给云函数云存储啊。主要的几个参数啊，上传选择之类的。好，这个是前端代码，那么我们第一个呢，首先是先得让用户选择一个要上传的图片，对吧，那么选择呢，就是用这个代码。上传啊，是用这个命令。然后我们在代码中写一下吧。

咱们在方法里面增加，那么这个是咱们上一节课的内容，对吧？啊，我们。把它啊暂时屏蔽掉，这块呢，都是讲的是关于这个云函数的。那么现在。上坟。的过程啊，现在我们要讲的是关于这个云存储，首先呢，你需要先让用户选择一张图片。先让用户选择一张图片，那么这个选择的命令啊，说咱们不知道没关系啊，在这边人家都给你。

演示好了对吧。我们把它。还是手打一下，方便大家注意。你能不能看出来直接的选择呀。是这个吧，选择本地文件。啊，我们要选择的是图片啊，更精准一些，咱们。咱们要选择的是图片。图片类。从本地相册中选择啊，双击打开。之后你要选择的就是图片的内容，对吧？啊，图片成功失败完成对不对。啊，咱们来一个成功。然后有成功就得有失败。支失败呢，你可以写，比如说用户取消了选择啊，他进入之后，他没有选择，选择了取消啊，成功失败完成对吧。

成功。然后选择的数量啊，这个数量它上面有备注吗。也不给个备注。他这是认为你你你他他应该是认为你是明白的啊，这个是数量的意思啊，你要选择的数量。最多可以选择的图片张数啊，默认是九啊双击，然后这里呢，我们选择个一啊，默认选择是咱们来个一，就是说让他可以选择一张图片。

之后啊，下边呢是成功，那么这个就是成功的回调res。然后这就是成功里面要执行的一个东西。对吧，他呢，就是一个输出，那我们也来一个输出，就是说我成功之后，对他一个消息啊，就是一个返回的消息进行一个输出。好，那么有成功呢，就有失败啊，咱们来一个。失败了，咱们打印一下。

啊。啊，看一下他这里用的是E吗。成功啊，他就没有写失败是吧。啊，失败他就没有输出，那么我们在这儿可以来个输出，看都用他吧。那这里呢，其实你也可以改啊，就回调你可以用别的，你写个ABC都行。好，我们改一下，换一个错误和E。然后呢，这边也就可以改成100。之后我们保存一下。诶，他这边呢，有一个报错什么什么失败没完成，我们看看是不是少了个逗号之类的。一般来说，这种报错十之八九就是少多说。但是我们。

有啊，逗号有啊。啊，这有逗号，上边没有，咱把它加这个逗号，然后我们再保存。啊，这次就没问题了啊，一般刚才那种图啊，它都是提示少了逗号之类的，好我们现在呢，在这边我们清空一下，然后这边刷新一下，然后这边点击一下。对吧，当你点击的时候，它就会弹出来一个选择框，那么这个时候呢，就会让你选择一个图片。对吧。然后我们选择一个图片。比如说这个吧。然后啊，你成功了对吧，我们现在选择这个图片，它就会把这个图片地址给展示出来，就是相关的相关的一个信息。啊，选择图片OK。

对吧，选择图片OK，然后下面这些就是图片的相关的信息，图片的名称对吧。好，然后呢，我们来看一下他这边的一个帮助文档，然后下面这个是什么意思呢啊。长度大于零，这个呢，就是进行一个判断啊，如果说长度大于零，它才会执行下面的操作。这款啊，这个我们暂时把它关掉。这也可以关掉，不要的。在这咱们呢是成功对吧，然后。成功里面进行了一个打印，然后进行了一个判断。我们有没有必要进行判断，其实他都已经提示成功了，嗯。

官方钱这样写呢，那要不然我们也判断一下。然后呢，这里的信息呢，还不足以满足我们的需求，对吧，你看这里它只是展示了一些呃，名称啊之类的，那么我们想要的，对吧，你想啊，我们想要上传到。什么什么地方，你总得有一个地址吧，对吧，那么我们可以在这里。审查元素，然后控制台。然后把它拉大一点，咱们删除，这个时候咱们看看控制台的一个效果。

我们想找的是地址。长等于一。那我们看一下它这个官方文档对吧，我们需要找一下它的长度，这个长度咱们找到了。

然后。找这个参数。算了，我们还是在浏览器里面好查看吧，这里看着太太别扭，太小了啊，我们在浏览器里面运行一下。然后查询。啊，这是我们随便选择一个，诶放F12。我们按一下F12这边清空，然后我们再选择一个图片。之后啊，这个就是我们的图片。啊，这个就差不多了，那么它呢，就是我们想要找的这个图片的地址，对吧。这就相当于是我们本地的一个地址啊，看着虽然有点丑啊，那其他的呢，你都可以打开看一看。啊，这个是图片的模板，图片的类型是PD格式。

然后你看他官方这里有一个。长度啊，那么它呢，应该是这里对吧。有一个长度。应该是，如果说咱们这图片读取失败了，那这里边应该就是零，所以说在这里呢，会有一个如果，如果说是零的时候，就不再往下执行了，咱们是成功了，是大于零对吧？咱们这实际的数字是一，那因为它是一，所以说呢，它会继续往下执行。接下来呢，就会获尝试去获取啊，它所对应的这个值啊，我们再把它复制一下。我们找一下它所对应的这个值。

这是一个数组对吧，我们把它打开。只有一个选项，就是一。一个数组就是它对吧，这个就是我们想要的，然后对应的就是它。好，那么这段代码我们在咱们的h builder里边怎么写呢？那我们在这里啊，照抄一下，把它复制过来，上面的这个呢，咱们就先不写了，咱们不需要多判断它了啊，因为咱们选中肯定是要成功的，现在是讲关于这个上传的，咱们肯定会要上传成功的。那我们。选中对吧，选中成功之后在这里。加上这段代码。那么这段代码呢，就是把我们这个图片的地址。

给它复制到这个边缘上。对吧。然后呢？知道了他的地址，将要进行一个上传的操作。在这里呢啊，我们用这个that或者用content啊都可以，然后我们可以看一下这两个的区别，对吧，那么他们呢，都是在ES6之后啊，有的那么增加了light和content。它只能啊，它声明的变量只在赖命令所在的代码块内有效，康塔声明的一个只读的常量，一旦声明常量的值就不能改变啊，所以说呢，我们。在使用的时候，其实他们是有交集的啊，我们在这里呢，可以用light，也可以用content啊，我们。

好的，那么我们现在已经获取到了这个图片的地址，对吧，图片的值就是我们。这个值。第个。对不对，那我们现在呢，把它输出一下。啊，看一下我们的效果。好，我们现在点击一下保存，然后。测试一下，这边刷新一下啊，从这边。控制台把门把它关掉，然后刷新。然后我们点击一下这里的查询。之后我们选一张图片。

这个时候就能看到了吧，啊，我们想要的图片地址就是后面的这个东西。那么它。就相当于是我们在这里所要求输出的图片地址对吧。那么我们现在都已经把图片地址获取到了，那下一步干什么，就是把图片地址上传到咱们的云存储里面，对吧。那么这个时候。我们再来看一下。这边啊，上传到云存储对吧，上传upload，那么我们照抄一下把它复制过来。这样吧，我们还是守塔吧，然后也能给大家熟悉一下。我们可以看啊，这里呢，就是关于上传的一个命令对吧。

咱们在这。比如你。好的。然后啊，打一个优能出来吧。这个里面应该没有图片这么一说了吧。对吧，这里边就没有图片，咱们刚才在相册的时候，还有一个是选择是从文件还是从相册，那这里面就没有了，那我们就选择第一个啊文件。然后在这里呢，啊，我们可以看到有几个选项对吧，这里呢，可以是第一个是建名。咱们可以随便起个啊，比如说是随便打几个数字啊，随便打的，然后第2PPT。

然后。然后再下面是一个肺。他呢是要上传的文件对吧，这个呢，咱们已经在刚才已经获取到了，对吧。在之后我们可以来一些成功失败之类的啊，然后如果说是成功啊，咱们可以来一个成功的返回。成功的返回。逗号哪一个，比如说是2S。啊，这个2S呢，你在上面也要写一下。之后咱们再来一个失败的。快。

第三个二加三。LG。加一。失败的返回，然后这个失败呢，咱们用一个，嗯，之前写过吧，一二对吧。这个呢是这个是选择的失败，对吧，这个是上传的失败。然后我们把它复制一下粘贴到这，好，然后我现在保存一下之后呢，咱们在这边。啊，我们在这边。我们把这些清空，然后我们刷新一下，这个时候我们随便选一个图片，比如说它。

哎，这个时候呢，有一个报错，我们看一下。啊，没有被定义，看这个直觉告诉我好像是忘了加引号，我们来看一下是不是没加引号啊，真是对吧。一说没被定义的，就是没加引号。好，我们现在再保存一下。之后清空刷新，然后再来一次，选择一个图片。OK，那么现在呢，就已经是上传成功了，另外呢，还有一点需要说的就是在以前的版本的旧版本呢啊，旧版本中这个位置是可以不传的啊，就这个是名字对吧，旧版本中是可以不传的，但是呢，新版的你就需要给它来一个命令，但是这个东西你可以随便写啊。我们现在呢，是演示一下他这个上传的方式，咱们这块上传完了，然后这里所能得到的就是一个成功对吧？Surface，然后four four，那么我们现在看一下云存储里面刷新。

对吧，这个东西就是我们刚刚所上传的，然后我们点击详情看一下，对吧，这个就是咱们的这个图片。啊，那么我们现在讲的呢，就是关于已经从选择图片到上传图片就都有了。然后下面这个地址就是图片的网址啊，我们也可以在这里进行一个访问，看一下效果对吧，完全OK，没有问题。那么我们现在呢，既然说在这边已经获得了他的这个地址，对吧，然后我们如果说想让他在动态的形式展现在咱们这个页面里面啊，引入到实际中就是说用户诶。选择到图片，然后上传到你的服务器，然后你是不是软件在头像的地方显示出来，对吧，就比如说你这个东西吧。那么这样的话，我们应该怎么整，对吧，咱们说最基本的，最简单的说，一开始咱们用它。

啊，我们把它取消返回。我们用这种形式。下面是不是也有一个图片了，对吧，那么我们这种呢，是写死的。对不对，他呢是写死了的，我们想要以这种上传的形式，咱们用户选择了上传了，然后把上传的这个图片地址替换到这。怎么着，那么咱们这个不能写死对吧，咱们这得整成一个变量啊。那在这啊，咱们给它改成一个变量，变量名称啊，咱们随便起个名吧，就叫S2C吧。然后它前面你也加上一个微杠棒的，或者直接加上一个冒号，对吧，这样的话就证明这是一个动态的，这是一个变量啊，而不是一个静态的值，OK，我们现在保存一下。啊，然后他现在呢，会有一个报错对吧，它会提示方法中没有找到src啊，没被定义，所以说呢，我们就得在方法中对这个MRC进行一个定义啊，我们找到方法在这对吧。

那么下面这些都是open啊之类的，那么我们得整一个方法。看对了行啊，别看错行啊。M2C。啊，S22C。然后。冒号这个时候呢，我们要直接写一个它的地址行不行啊，我们来试一下对吧。这个他的地址，我们直接把地址写在这儿。是在引号里面吗？我们现在保存一下。诶，他会还是会有一个报错。这种报错十之八九是少了个逗号，我们看一下他说是哪一行，S2还72行啊，那么上边加上个逗号，然后我再保存。

对吧，现在呢，嗯。现在呢，还是有一个报错啊，还是在这个文件里面，然后我们再看一下。那我们把这个变量啊，咱们就不放在这个位置，咱们放在date里面。放在date。Src。我就直接粘贴一下吧，就咱们刚才这一段。那么放在这里，然后我们再保存一下。啊，这样的话就能够正常显示了，对不对，那么我们现在这个代码的意思就是这里有一个图片。

对吧，这个是组件，一个图片的组件，然后呢，图片它调用的是这个XRC这个变量，然后S2C呢，是在data里面定义嘛，S2C等于什么？就是后面的这个地址，后面这个图片的地址，对不对？那么我们现在呢，折腾了一下，虽然这里不显示图片地址，但是现在这里还是图片地址，还是一个写死的，对不对？那么我们现在的目标是什么？是把我们上传成功返回的这个地址给他按到这里。对不对，那么我们在这呢，就可以直接给它删掉啊，咱们留个空，因为我们现在只是想给他一个定义，就是说我们这边有这么一个变量，至于这个变量是什么，暂时不说，什么时候说，等你上传图片之后再说啊，可是你在这儿呢，可以给一个默认值，对吧，你像咱们微信头像，它默认是一个灰色的，对不对。一张灰色的图片，那么你上传图片之后，它这里会更改为你自定义的一个值，那我们再点击一下保存。

对吧，现在这里呢，就是没有了。清空一下，那么怎么样才能说，当我们把图片上传到服务器之后，把这个地址给它装到这呢？首先呢，我们来看一下咱们获取到的。这些代码里面对吧，哪些是我们有用的，我们把没用的先给删除掉，然后我们选择一个。对吧，那么这个是咱们的返回的。返回的信息对不对，然后其中我们有用的。是什么？是ID对不对。所以说在这我们至少知道。我们想要的是。Res。啊，S。里面的Y这个呢，就是咱们的图片地址，但是呢，咱们获取的这个图片地址，咱们把这个值给到附到上面呢，附到这个位置呢，怎么整。

来个等号。啊，把它付给什么。S。对吧。好的，那么我们现在。保存测试一下。在这边啊，我们还是选择一个图片上传。这个时候呢，你发现诶，我这明明已经是提示上传成功了，对吧，这个地址也有了，但是为什么没有显示出来呢。干什么？因为你这里那个Z，它在function里面。会异常啊，那么我们想让它不异常，你就需要对它有一个指向。

怎么指？在里面。咱们再来一个变量，比如说是自己。等于。This，这样的话在这个位置，那么它就是。然后呢，我们下面经历了function对吧，经历了function，我们没有用this，咱们用什么。虽然说self我们在这里给它定义了这，但是你就记住，在这种情况下，我们就需要替换一下，然后我们再保存。真好。

这边啊在清空刷新打开，然后看。对吧，这个时候你会发现它已经有所显示了。啊。那么我们在这里对this的指向进行了一下替换，对吧？那么我们就要明白在什么情况下。需要进行替换，或者说这次的指向有哪几种啊，我们来看一下图片。This指向呢？大概就分为五种，在普通函数之中，这次指向的是Windows，在构造函数中，这次指向的创建的对象，在方法声明中，指向的是调用者，在定时器中指向的是Windows，在事件中指向的是事件影响。那么如果说以后。像我们这种。方式，然后还有多种位置相交杂的情况来说，我这这次调用的指向不灵了啊，那么你就可以在上面给他定一个新的变量，然后在这个位置调用新的变量替换Z就可以了。

好的，那么我们现在呢，已经学会了选择图片，上传图片，那么接下来呢，是什么？就是它删除图片了，对吧？啊，其实你学会了前两种，你自己摸索着也能猜到啊。还有这里。一个是选择，一个是上传对不对，那假如说我们想要删除，怎么删啊，我们现在呢，先把它。对对。别打。屏蔽掉。之后啊，我们写到这里吧。啊，但是说你要是就一张的话，说懒得在这个呃，APP里面折腾的话，你也可以直接在这对不对点一下删除啊，这个简单方便，但是呢，我们大部分时刻啊，还是说在APP里面进行整对吧，你毕竟你选择高大上一点，你直接手动去操作话，累死你。

那么我们可以看一下。下面的几种。这是选择图片对吧，这个是上传图片。那我们猜一下你想要选择，你想删除图表用什么？用和底类相关的对吧，我们看一看有没有没有啊，咱们。用。然后点我们找一下有没有跟底类相关的是吧，有一个，然后呢，我们双击，但是这里呢，有一个问题啊，我只能说这个删除呢，带着大家做一个思维扩展，呃，这里有个参考，我们点击过来，它会自动跳转到啊客户端删除。呃，官方就有一个说明，不建议使用此API，删除云存储文件是一个高危的操作，应该由云函数进行权限校验后，由云函数来删除云存储的文件。

阿里云不支持此API，前端运行API会权限报错。所以说呢，我们就分一个思维扩展，对吧，你如果说想要三。对吧，你就知道诶在用这个文件就可以，但是是。那就像我刚刚所说的，咱们用的什么，咱们用的是阿里云对吧，所以说呢，咱们就没有办法继续往下走了，因为阿里云呢，在人家就不支持这API对吧。好的啊，那么咱们这节课呢。就跟大家分享到这里啊，最后呢，咱们再来回顾一下啊，复习一下咱们这节课所讲的内容，对吧？呃，我们关于云存储调用呢，你可以直接啊在咱们。

这个位置啊，说我手动去上传对不对，手动去上传完全没有问题，然后我们如果说想要在APP里面让用户。自己去上传。比如说像微信里面设置头像对吧，那么你就先需要有一个关于头像设置的过程，对不对，那么你想要设置头像，就得把这个头像的图片上传到咱们的云存储之中。你在上传之前，第一步就需要先进行一个选择。对吧，你你上传的话，你得让系统知道你要上传哪一张是不是。所以说我们第一步是需要先选择啊，选择呢用的是这个命令。之后啊，这个一就是说你可以从一到九啊，我们默认的就是来个一，就是说你能选一张图片，因为头像嘛，你不可能来来来九张图，来九个头像吧，啊，我就一张头像。

然后呢，下面啊，就是说你选择成功了，或者选择失败了，对吧，这个会有一个调用啊，失败会有一个失败的日志，成功会有一个成功的日志啊，如果你失败了，那那那这事儿就这事儿就没得聊了，就不用往下走了，对吧？那如果说成功了。在这里呢，呃，你看官方文档，它还有一个长度的一个校验啊，大于一，然后还继续往下，咱们呢，就把那部分给省略了，咱们在这儿啊，就直接获取到了这个图片的地址，就是你到这个位置的时候，其实它就已经是弹出来一个，呃。让你选择图片的一个对话框啊，然后你勾选啊，就是你选中图片之后。选中图片之后，这个呢，就是图片的一个地址啊。因为你可能他认为你可能会有多张，那零呢，就是第一章也是一个数组的形式之后啊，我们也说了，这个跟light其实差不多对吧，那么都是定义变量的意思，我们把这个图片的地址定义到这个变量上。

然后我们输出一个日志啊，图片地址我们就得到了。这个地址呢，就是咱们本地相当于是本地的一个虚拟的地址，一个临时的地址，对吧？之后咱们得到这个地址，就要把这个地址上传，那上传用什么命令。Upload对吧？用这个命令进行上传啊，这是固定的语法上传，咱们需要填写一个是图片的名称对吧？这个是图片名称啊，这个名呢，我随便写的ABC def fe，你随便编啊，然后这个呢，就是图片的一个临时地址，那地址是什么？就是咱们刚刚我知道的，对吧？这里也有了。然后这个过程就是上传的，上传呢也是有成功有失败，如果成功啊，打进一个成功的返回，如果失败打进一个失败的返回，然后如果成功呢，我们就能够获取到，诶，他上传之后，它会给你一个啊这张图片所对应的网址啊，然后在我们的瑞里面，成功的race里面就是这个表达ID对吧，然后呢，我们把它。

就获取到了，然后下一个流程，诶我们想的是就像微信上传图片一样，人家把图片上传到你的云服务器了，那目的是什么？是在他的头像框里面显示出来头头像对不对？那我们现在已经得到这个头像，我们就要把它展示出来，那么展示。咱们比如说把它放在了这个位置，调用云存储的图像，咱们调用一个image标签，这个非常简单，就图像嘛，图像标签。之后。这里呢，我们要是直接放一个图片地址行不行，没问题，但是那种就是静态的，咱们现在想要以一种动态啊，就是种变量的形式去展现，所以说呢，我们起了一个变量名称src啊，前面src等于src，记得有一个括号，为什么这有冒号才证明后面它是一个变量，对吧？然后对于这个变量，我们在这里默认值给它一个空啊，就是说你刚开始什么都没有，或者说你也可以写一个别的图片，默认一个是什么什么什么什么别的图片都可以。

之后你执行到下面。下面之后啊，我们这个图片用户选择了，也上传了，上传服务器成功了，上传服务器成功之后，然后src这个变量值就变成了我们通过服务器中获取的这个图片的地址，之后在这里就会有所改变，就会传到这，然后就会传到这，然后就会在图片的相应的就在咱们APP的相似位置进行展现啊，那么我们大概就这样的一个逻辑，好，那么感谢您的关注，我是霍长亮啊，期待与您有更多的交流与合作啊，这个是我们的群啊，QQ啊，微信的网站之类的，呃，您学没学过我们的课程不重要啊，您加个群，加个我们的QQ，总归会有相互交流，相互合作的机会，好，这节课就跟大家分享，这里感谢您的关注，拜拜。