9-使用云存储完成图片的上传及使用图片处理原创

Hello，同学们，我是童阳老师，这节课呢，我来跟大家讲解一下如何在微信的语音托管的开发当中，我们实现图片的上传啊，以往我们的图片上传中需要什么，我们的服务端的配合，调用一些特定的接口，我们才可以对图片进行上传啊，同时我们在上传的时候呢，还要对一些图片的文件对象进行一定的处理啊，就会对这个业务流程呢，就是一个比较传统的开发流程了，而且相对而言，对一些入门级别的新手而言并不是那么友好。但是呢，我们微信托管呢，就提供了一个非常之友好的API上么叫对象存储，然后呢，方便我们只调用一个固定的方法就可以把图片进行上传了，然后呢，这里面呢，我先就着这个业务，我们来在我们项目当中讲解如何使用，然后呢，这个业务的应用场景属于在我们的一个下了订单的确认订单的过程当中啊，因为现在的疫情防控的要求，我们模拟成一个需要你上传你的行程码，我们才能对于你下订单的一个操作，然后呢，在你添加订单的时候呢，上传图形码的时候，这就是我们要对一些图片进行上传的一个业务流程，OK，然后呢，这里面我们是在哪个页面里面实现了呢？我们是在我们的ticket。

以及tiki在里面。啊，我关掉其他的线啊，好，那么这个时候呢，我们就是在这个位置实现了图片的上传啊，这里面呢，我们先就着普通的方式来讲解一下如何实现对应的功能啊，首先我们要进入到页面，进入到这里面来呢，我们先改写这里面代码哈，需要做什么事情呢？我们需要先把这个涉及到两个API，我们第一个API称之为称之为先，什么先第步我们先实现。选取图片。使用我们使用的微信的这个trust ing的API。然后呢，第二步得到了什么得第二步我们什么得到了。

图片之后进行上传到云端啊，但就是我们什么，就是我们的这个对象。非常存储，OK，这是我们的一个大的一个业务流程，好，我这里面先把我这里以下这部分呢，是我们已经做好的一部分的操作，但是呢，我们先做个最传统的方式来讲明这样的业务流程，OK，首先呢，我们先看一下我们的业务逻辑当中，他们在我们的页面部分，我们这里面是有一个按钮。在这地方我们上传行程码，下面做了一个按钮，然后我们给按钮绑定什么，绑定一个事件，然后事件触发的就是这一个上传的这一个对应的事件。而这里面呢，我们先用传统的方式，用什么微信点ing，然后呢，这里面常用的什么是我们的这个上传图片的数量。选择图片的数量啊，这里面我们就选择多少张呢，我们默认为三张。

啊五张，然后呢，这里面我们写上一个五。零就表示不限制，同学们零就表示没有限制，再说呢，我们写上一个代码哈，是里面我们把结果，如果它选择成功之后的结果，我们会得到什么内容，我们这边简单的把这里把选中的图片先打印出来，看一下它的结果。好保存好了之后，我们的业务流程正式开始啊，去到我们项目当中选择啊，广州选择深圳。OK，就是进到了我们第一个的列表菜单列表当中，我们选择单次啊在里面就是到时候我们这里会讲解到这里地图的渲染，然后这里面选择购票。就卷到了我们这个流程当中了，然后呢，这时候我们打开我们调试器啊，清空已有的内容，然后选择。上传图片。这面我们是随便选择一个图片。那他们看到这里面就会什么，返回有个什么东西啊，返回有一个我们的这个。

结果is这里面啊，这里面就会得到我们得到临时的图片文件。看它是一个数据啊，说明这里面就大家看到我们说哈is当中。Choice。会。可以得到选中的图片的临时路径。OK，然后呢，下一步呢，我们就要调用，我们调用我们对应的API啊，就是我们官方的这个对应的API。啊，在这个地方我们需要做什么，我们需要把这个得到的这什么就是。AG的结果啊，反出来。好啊，这是得到了我们上图片，然后呢进行调用API对它进行上传，然后上传说呢，这个是什么，我们存储的图片的路径的地方啊，比如说我先写一个写下A点啊片NG，然后呢上传的文件就是选，那么选到我们现在的这一个叫做is。

当中第几个的。第零个啊，刚才我们有打印出来看的哈，刚才就在我们打印的出来的图片的那个地方啊，但是这里面已经刷新了，就没有了哈。奥特曼在这个地方就是要选用什么，选入我们的cloud ID啊，这个ID就在我们之前的项目当中是封装有的哈，比如说在我什么地方，在我的UNI当中的API请求当中哈，这面我把我的。云托管的PDAID放到这里来。

再用说来听听。啊同学们这里QID就填写吗？填写你在你的云托管的管理后台当中的环境这个地方，找到你的这个环境ID。然后我们把它粘贴到这里，然后呢，这里面如果成功了之后，我们把这打印个回结果出来哈，就Su。叫什么ano I？然后同学们，我们把这个结果打印出来看一下哈，就是上传成功的。I。然后我们把这个。结果显示出来。好了，同学们啊，这个时候我们来看一下代码能得到的效果，这里面稍注意一点哈，这个图片的我们现在是固定的写实的，然后这里面也是约定了只上传第一个图片位置啊，只有一个图片的场景哈，那我们测试一下。

我们点击广州，然后选择深圳，点击搜索。啊，同学们打开调试器，清空一下。要选择班次。然后这里直接点击购票。再回到里面来，我们选择上传图片啊，找到一个图片，然后点击。上传成功那么哈，这里面我们可以看到，在这个地方我们就有什么有了一个上传成功的结果，同学们这里面主要是什么？得到一个FAID，就是我们上传的图片之后回调的一个图片地址，这里面稍微注意一点，就是它返回的图片的地址是么西个cloud ID。们啊，它并不是一个我们常规的一个图片的一个访问链接地址，但是呢，在我们的这个小程序当中，我们可以调用什么，我们可以通过我们的记忆组件当中的这一个。Image和媒体啊，媒体组件当中找到了，找到图片，我们看一下这里src是支持什么图片资源，这个资源当中看清楚了，同们啊，这里有一个特别的说明，在2.3.0的版本之后可以支持什么？支持云文件的ID，这里所说的云文件的ID指的什么？指的就是我们项目当中的这一个返回的这个发ID啊当我们可以测试一下。

我们可以把它放到我们放到我们的首页当中啊，去到我们的首页当中。首页的模板当中，我们可以做一个小小的尝试，诶，我在这个地方，我直接写上一个，用一个这样子的一个组件，我直接src，等于刚才我们得到这个code的ID，然后保存之后我们看一下是不是能得到一个图片的地址。看到吧，同学们啊，这里就得到图片地址说明什么说明。我们的IG这个标签是可以使用刚才上传成功后的这个图片的链接的地址啊同学我们也可以看一下，在我们的这个云开发当中找到我们找到我们的对象存储。

啊对，看一下这里面你们就会看到什么，得到一个最新的，我们看按时间来看哈，看到我们的存储内容当中。嗯，我们先天是三月的这个地方啊，同学们是不是有一个我们上传的图片。看到吧，这a.PG做我们命名的图片的文件啊，就是我们的刚才上传图片，它就出现在什么，出现在我们现在这个目录结构当中，就我们对象存储里面的内容当中，OK，这就是我们上传的一个操作，但是同学们我们先回过头来看一下。这个上传的结构会有什么问题呢？首先第一个问题我们会这里面摆在我们的问题当中，这里面实现了上传哈，我们流程当中这一步实现了上传。但是呢，我们这里要反思几个事情，这样的上传的操作合理吗？就我们是不是要再次进行业务的封装，首先我们这里得到吗？得到了这里呢，注意点哈，我们这里有一个。

思考点。我们选择图片之后得到的是什么？得到的是数组。而且有可能是多图片上传。对吧，我们有些时候，比如说刚才我们的业务场景就希望他上传的不止一张图片，这时候我们，但是我们这个操作中是不是只取到第一张啊，那么这时候如果你是数组说意味着我还是不是得这里进行进行一个循环处理啊。对不对，就是说理论上我这个地方是不是要写上个for循环。这样的操作，同学们啊，这样的操作会导致什么？我们需要在里面进行一个很长时间的等待，而且我们会发现这段代码当中，实际上一般而言，我们只要改什么地方，是不是就选用一个，这两个地方是不变的，而剩下的操作流程其实都是差不多的，所以这个时候呢，一般而言我们就要考虑什么，考虑把这个上传接口进行单独的封装，然后呢，各位就说我们看封装之后会是一个什么效果，OK，我把上面的这个给删掉了哈，然后同学们接下来我们要做的事情，实际开发过程当中，我们会在我们的项目跟目录当中，我建了一个lo.j。

看到吧，同学们，然后这里面呢，我声明一个函数，这个函数使用的就是什么，就是写上了一个啊QF的lo，然后这里面我接受一个数据，然后。Lo，什么就是？希望这个，呃，就是封装云存储的上传的操作，OK，接收的参数是一个临时文件的数据。啊，这临时文件数指的什么？指的是刚才我们是调用什么调用了这个出行。

Choose image的时候返回的这个数组，然后我们把这个数组就可以传到这个函数来，我们做什么事情呢？我们这里面应用了一个技术，我们什么用了一个promise。使用promise来封装。上传的操作。因为什么？因为上传是异步的，然后呢，我们做什么事情呢？同学们，我们这里面会返回一个promise，并且promise当中我们会什么第一步，我们会什么根据得到的，这里面就是我们刚才传递来的数组，而在这数组当中，我们会根据你的文件的名字来获取你的后缀名。啊，这里面是按照点号切割获取点号之后的部分啊，这个什么就是得到上传的图片的后缀名，然后呢，这里面我们需要做个事情，我们什么就是因为上传图片，既然你文件是有可能会冲突啊，比如说你上传在a.PNG它也上传的a.PNG那上传上去放在同步目录的时候，是不是有可能会有一个我们说的一个命命名重复的问题，所以我们这里面一定要什么哈，为了。

为了。避免文件名重复，我们需要什么？先生成一个文件名，OK，我们生成文件名的机制也很简单，第一个是用什么时间戳，然后生成一个什么，生成一个随机数。然后再加上嘛，加上点号，再加上补回你原来的候选名，OK，这里面就是我们生成一个随机的文件名的一个机制啊，这里面呢，我们也调用了刚才的云上传的那一个函数，就是我们的微信的club file，然后这里面呢，也是填写嘛，填写我们的这一个叫做环境ID。啊，环境ID啊，记住是在我们的云托管的这个平台当中，这里复制这个，到时候复制你的这个ID，然后呢，这里面呢，我们这里面就是上传就。

使用刚才生成的随机名字啊，但我们随机，但是后缀名是不变的哈，第二第二个问题是什么，就是使用什么使用我们的这个什么临时的文件路径了，然后呢，成功之后执行result，从而让promise得到结果啊，然后往下一步做什么西就失败了，我们就reject提示错误信息啊，再打印错误信息出来啊，这是我们封装的第一步啊，同学们看一下这里面我们是用了一个什么语法，我们用了一个map语法。呃，使用一个数组的慢目的什么？目的是返回一个。Promise一个。Polo。对象。组成的数组。啊，这个时候呢，同学们如果对于promise不太熟悉的话，建议你可以看一下我们的二阶段老师。

啊，建议大家可以看一下我们春风的。JS基础教程当中的相关内容里面会有非常详尽的跟你描述promise对象能做什么事情，而且我们不单只是个promise对象，而是让它组成一个组成的数组，看到吧，同学们，我们map，因为map的操作就是返回什么，返回一个新的数组，数组当中就包含了什么，包含了这里面return的所有内容啊，这里面return就是个promise对象，从而我们使用什么语法呢？我们这有一个语法很特别啊，这里面使用一个使用promise。会，我们会做事情啊，等待所有的promise。So。从高效的么，高效的高效的。

实现了，实现什么实现了批量。上传的业务。啊，这个接口封装好之后呢，我们不单只能处理单个图片，我们还可以允许传入多个图片，而得到多图片之后呢，我们都会一并处理，然后处理完了结果之后，我们再进行整体的返回，然后这里面我对这个函数进行了导出。那么同学们经过这样的封装之后，我们回到我们的业务当中，好，这里面我先把刚才的这一部分，我用注释形式注释掉，先我们再看一下这个地方，那么现在而言，我们也是先么先使用。选择图片，但选择图片之后呢，我们直接调用，这里面也做了一个轻提示。啊，为了更好的用户体验，我们提示用户上传中，然后呢，这里面我们是得到嘛，也是得到了一个。

调封装好的上传。接口。然后统一上传所有选中的图片。啊，同学们看一下这个地方我们是不是也是刚才调用这个接口，然后呢，里面这个啊，Temp的当中的fire pass，就是得到所有的选中图片的临时路径，然后我们把路径传到了刚才我们封装好的这个函数当中，然后我们就能执行一个批量的上传，然后呢，再上传结果之后，这么就隐藏了，这时候就对于刚才的这个售楼点这个操作进行隐藏，然后呢，再往下的地方我们做什么讲，我们就可以得到。所有的请求的结果is就是得到所有上传之后的图片链接的结果，然后这里面呢，当我们的结果当中，我们只要什么呀，是不是只要发ID啊啊这个地方我们说哈，就在返回的结果。当中。

啊，我们只使用吗？使用我们使用我们的对应吗？使用的使用法ID啊，就是云ID，因为我们图片显示后只显示吗云ID内容啊，当然这里面呢，我们还有一个操作，我们一开始时候在这个组件的头部，我们声明的么，声明有一个date。就什么行程码的对应的行程码的图片啊，行程码的图片。OK，然后呢，我们在得到了这个数组之后呢，就回到刚才那地方啊，我们得到了数组之后呢，我们会直接修改这个状态的值。啊，我们先体验一下这样子封装之后代码的结果啊，封装的好处就自然不用说了，那么哈，原来单独的上传单个图片来进行这个业务流程了，而现在而言，我们把一切的流程都简化到了现在的程度，而且还包括我们其中的一些业务流程啊，如果你我们把这三行给删掉，你就会看到哈，我们把这个用户提示的部分给删掉，以及得到结果之后去取消掉，你看到整个上传的流程简化到了，你看到了目前这个流程。

看到了吗？就这这段代码的结构就等。替了我们上面的这样的业务操作啊，是不是很方便呢？而且这里面还只是实现了单个图片的上传，还没有更好的拓展性，所以这个时候呢，我们需要在官方的API上面进行一定成熟程度上的一个的调整啊，就调整到了我们下面这结构啊，待会把我们其他一些友好的用户体验的代码我们恢复回来。啊，然后呢，这时候我们测试一下这种调用的时候得到的结果会是怎么样的，来我们点击这里广州啊，选择另外一个城市。下得暂停一下。然后呢，这里我选择两个三张图片哈，然后点击打开。

啊，同学们啊，这里面就实现了图片的上传好吧，然后呢，这里面的图片的上传当中呢，其实我们还要就是实现了我们的主业务逻辑哈，并且在这里面上传之后，我们修改什么修改。修改date当中的。啊，但这是我们的修上传流程这样的情况哈，同们，所以呢，这个时候呢，跟我们的API上传是一样的，有时候呢，我们需要把一些官方的一些接口进行再封装，从而能够达到简化我们的开发的效率的一个目的啊，然后这里面呢，我们也看一下，顺看一下我们的这个代码当中，然后我们在这里面呢，做了一定的判断，比如说看这里面我们是做什么事啊，首先我们会判断你有没有上传。一开始的时候，我们的图片是什么？是一个空数。看到吧哈，这是个空数组，那么呢，长度占为零，所以这个时候呢，我们是不显示这个区域的，就是你看到的对应的右边的这一个啊，显示行程码这个图片的区域只有个按钮在显示上传。

然后呢，在这地方我们做什么事呢？这里面我们也是一样的，根据如果有了这个图片轮换，我们做什么样，我们是不是做了一个循环。啊，根据那个数组我们循环，那么循环出对应的吗？对应的这个图片截出来。并且我们还上面这里面就是我们那个op这个用了什么，就是我们那个啊file的ID，就是我们的云ID，然后呢，在上面的地方，我们还做了一个按钮啊，就是你们看到这一行代码，就是对我们上面一个删除按钮，在删除之后呢，我们会执行一个删除图片，并且我们删除图片是根据什么，根据它的索引值。啊，同学们可以看一下我们这一个有个删除图片的操作，Delete。在这里同们哈，我们根据什么？根据这个索引值，也是通过形式来传递参数，然后在这个数组当中，我们先做一个声拷贝，以便于对原来的数组产生影响，然后呢，在里面呢，指定索引值，然后呢长度为一，就删掉其中一个图片啊，并且再重新修改这个date啊，这里面点击删除。

啊，他们我们也可以对于这样的图片进行删除，然后或者再进行重新嘛，重新的上传。看到了吧，这里我再上传啊，有一个提示，同们一般上传当中，我们建议大家还是有一定的提示，因为上传如果图片比较大的话，也根据你当时的网络状况有关，如果上传比较慢，让用户一直停留在一个没有看到任何提示界面，他会以为，哎，怎么办呢？我的项目是不是没有上传成功或没有选中，会有一定的用户的使用焦虑，所以这时候呢，我们一定要建议大家在执行上传的过程当中有一些友好的新提示，这是个非常重要的地方，然后呢，上传图片之后呢，也要考虑到如果用户上传错误的时候，要允许给他做行一个删除的一个调整操作。

好了，同学们，那么我们上传的操作就讲解到这里，我们下节课。