64、商品服务-API-品牌管理-OSS前后联调测试上传

前面我们获取到了对象存储的服务端签名数据，接下来我们来联调前端项目，完成文件上传功能。在前端要进行文件上传，我们是使用element组件里边的upload组件，也就是EL upload进行上传，相关的一些配置属性在文档里面都有，主要编写好我们文件要上传到的地址，包括整个上传完成以后的文件列表的展示，以及其他回调函数等等。我们呢就不逐一封装了，我给大家已经封装好了两个文件上传组件，我们直接复制过来测试一下。在DOS里边代码，前端代码，我们在upload组件里边，这有一个单文件上传，多文件上传，注意我这有一个policy.gs这个GS呢，我们来打开看一下。他呢，其实就是发送一个请求，找第三方服务，要到我们对象存储的服务端签名数据，封装的是一个promise的方式，别人可以调用这个方法，要到服务端签名数据以后呢，继续往下做就行了，那我们就将整个upload文件夹复制，我们放到我们整个项目的组件里边来找一下components，好，我们来在资源管理器中显示。

将我们抽取的这两个组件，我们放在这这两个组件呢，其中有一个单文件上传和多文件上传，那么需要改什么呢？首先来到每一个文件上传组件，将这一块的action地址，我们文件要提交给哪，我们改掉，那大家要参照自己的阿里云的相关配置，我们阿里云这一块这个bucket存储空间的endpoint，将这个bucket域名复制过来，将这个外网访问的域名复制过来，这就是我们文件将上传到的地方，来替换我们这一块的地址。CTRLV，同样单文件上传我们也将这一块改掉，这是我们做的第一步，先将这一块改掉，第二个policy.gs确认我们是给third party oss来发送请求，因为我们会自动加上API前缀，所以前面呢我们就暂时不用写了，我们封装了一个单文件上传和一个多文件上传这两个组件，封装好以后呢，我们在品牌新增或修改的时候，我们可以看一下我们后台这一块，在新增品牌，我们这个品牌logo地址，我们就需要是一个单文件上传，那这个文件上传要怎么用，我们来到我们的品牌视图views里边，Model product品牌，这有一个品牌添加或者修改的这个view。

我们来找到我们的品牌logo地址，以前呢是EL input绑定了一个input框，而我们现在要用文件上传组件，这文件上传组件在维修中，我们抽取的组件要使用先得第一步在我们这进行导入import来导入什么呢？我们先来写在这from。

From的地址。首先ant符代表从SC目录开始，当然这个ant符是之前定义的杠，那就是src目录下的components，整个文件夹下的我们还有一个叫upload。Appleload下的，由于我们现在要用单文件上传，所以呢，我们来复制单文件上传的名字，复制把它放在这，这个直接复制不过来，那我们就自己来敲single upload。我们先导入了这个组件，当然还要给这个组件起一个名字，我们就叫single upload，我们要使用它，我们只需要在这替换一下原来的好，我们这个就使用single upload组项，直接用它的名字，或者呢用它的短横线写法，那将这一块的大写都变成短横线也是可以的，但这一块最重要的就是V-model动态绑定数据，那以前input绑定什么，这一块还绑定什么，那要想使用single upload，那么就还必须在view里边，我们这是data部分，这是methods部分，那么还有一个属性叫components。

我们来说明一下我们这个view组件里边要用到哪些组件，我们现在呢，用到一个single upload，相当于前面是组件的名和我们导入的真正的组件。但这两个都一样的情况下，我们就可以忽略掉，那我们最终标签上写的这个组件的名字是根据components这一块决定的，写好以后呢，我们CTRLC。我们重新启动我们这个项目n PM run。我们先来看一下效果，当然我们在这一块呢，还缺了非常重要的一步，我们一会儿给他先加上。好，现在登录进来品牌管理，我打开新增这块呢，应该是个文件上传，我这一块忘了没保存，我重新保存一下。

好，我们重新点击新增，这就有一个文件上传按钮，F12，打开控制台来准备测试上传network，我们点击上传。首先我们来随便选中一个图片，我们会看到呢，先会发两个请求，由于这是跨域的，先会发一个option请求，然后呢，再发一个真正的get请求，我们要到了服务端的签名，那要到以后呢，那就本应该上传，结果他这边呢没动静，打开我们single upload封装的文件上传组件来分析一下这个EL upload，只要我们填写了action地址，当我们点击上传这个按钮，在EL upload里边，我们只要点它，我们就是选择文件，那文件一选择好，会触发一个叫before upload，就是文件上传之前的这个逻辑，那这个逻辑呢，我们来CTRLF搜索一下，它在这呢，会调用一个方法，回调这个方法呢，它是返回了一个promise对象。

这个对象会在里边调用policy这个方法，而这个policy方法呢，整个policy我们来可以看一下，它呢是import从外边导入的一个功能点杠，那就代表single upload当前目录，它导入了policy GS，这个GS呢只暴露了一个方式叫policy，所以呢，它相当于导入了这个place方法，那它在下边呢就可以进行调用。来可以看一下它调用了这个方法，而这个方法呢，是给我们服务端发送获取服务端签名的请求，那么请求数据获取到了以后呢，接下来我们在这consolo打印了一下响应的数据，当然我们发现我们这个控制台，我们来看一下，诶响应的数据我们确实获取到了，直接是这么一个对象，那接下来呢，它将整个响应的对象，然它要赋值给data obj，那就是我们data里边绑定的这个，但是他在这赋值的时候，诶，我们发现这是这么来写的，response.data.policy而我们现在呢，没有data，我们response直接返回的是签名数据。

所以应该是response.id.DR点什么，那要想有data呢？我们就给他写一个我们统一的返回，那我们整个项目统一的返回呢？我们可以让它返回整个R对象，我们将整个map普封装在那个data里边。我们就把这个删掉，我们让他返回R，我们所有整个项目呢，全部返回这个R对象。导入进来，然后呢，我们想要在这将整个map返回，那就应该是r.OK我们将整个map给里边一放就行了，Response map。怎么放呢？我们ok.put我们要放一个data，而这个data呢，就是我们这个map。

我重新。启动一下我们第三方服务。那3万端口启动成功，我们先来测试一下我们3万端口的这个数据，我们从网关发请求，现在我们看到我们的数据呢，是放在data里边了，那我们前端呢，现在就不用改变了啊，重新测试。刷新。我们在控制台呢，打印了一下相应的数据，包括把最终复制好的数据也打印到self里边。来，点击新增，点击上传。随便选中一个图片，诶，我们发现呢，响应的数据也都有了，这个真正封装在data塔obj里边的这个数据，这个selff呢是封装的this，那就是无U对象里边的这个数据也有了，只不过我们在上传的时候呢，我们还发生了一个错误，这个错误呢叫to，这里也就是说我们在访问这一块的时候，From origin from，从我们本项目给阿里云访问的时候，诶有跨域问题，所以这也是非常关键的那一步，我们在配置对象存储服务端签名上传的时候呢，由于我们浏览器是直接将文件以及它这里边呢，有一个叫。

Data就是我们这个data obj这里边的数据以POS的方式直接提交给对象存储的，所以呢，存在了跨域请求，那我们就应该在oss里边能将我们这个bucket设置为能跨域访问的，包括在文档这一块也写的很清楚，我们在这儿体验上传的时候呢，在前边都说了，第三步一定要修改跨域，跨域的规则呢，就允许所有来源，那这个所有来源呢，你可以配成自己的域。我们一上线以后，我们前端项目有一个固定的服务地址，那我们配置成我们自己的域，包括我们要允许post进行跨域访问，那我们来填上这一块的配置，来到概览里边。

或者基础设置都一样，往下翻，这有一个基础设置，这里边呢有一个跨域访问未开启，我们把它设置，我们给它创建一个新规则，来源所有的请求。所有地方post请求都允许他进行跨域访问，我们点击确定，现在我们再来测试一下，把这一块清空来点击上传。随便选一个图片。诶，我们发现呢，上传成功，那这个图片在这儿也有展示，而且我们这一块的前端代码大家注意。我们在这上传的时候啊，首先每一个文件有自己的文件名，我们是这么来获取到的，而且呢，我们给每一个文件名前面加了一个唯一的UUID，防止文件名重复。A用户和B用户假设都上传头像，他的头像叫1.gpg，是一个刘德华，而他的图像呢，也叫1.gpg是一个梁朝伟。

那这样的话呢，同样的名字，那就会进行覆盖，我们加了一个唯一ID。包括把它存到哪个目录下呢，那还是根据我们。之前从服务端要的data里边的，我们来看，那从服务端要的data里边的这个dar，我们相当规定了，按照目录组织存放，那如果上传成功，我们来看一下文件管理，刚才的201911。就要有相应的文件，诶，这还多了一个杠文件夹，那我们相当于在这拼装的时候呢，多了一层杠目录。我们在这写一下这个dar呢，我们就不加杠了，因为我们返回的这个dar是有杠的，把这一块去掉。保存，我们重新测试来看一下效果，我们还是使用这进行文件上传，我们关闭先来刷新一下。点击新增，我们来随便选一个图片，就这个红颜色，我们发现呢，上传成功来到阿里云验证一下。

到2011整个目录，我们刚才多了一个杠，把这个删掉以后呢，现在直接来到这儿好没问题了。那这一块要上传成功了，那我们就应该在表单上，我们品牌的logo地址，就应该是我们真正可访问的文件地址。这个呢，我们也可以很方便的验证一下，我们装了VIVO插件，直接来到view里边，我们来看一下我们表单上传完文件以后，图片的logo地址有没有变。这一块呢，有一个main content，我们主要内容区，我们把它展开，EL table展开，我们来找到呢，这有一个叫EL table pen里边有一个EL card，我们在这个card里边呢，有一个品牌，在品牌里边有一个end or update，就是我们这个添加或修改的对话框，我们把它点开，点开这里边呢有一个data form，因为我们在这个表单里边绑定的是data form这个数据，那logo地址呢，是data form里边的logo属性，所以我们来看一下data form里边logo，诶我发现呢已经变了，是这个地址，当然我如果把它删掉，那这就没有了，我要先上传一个。

点击。我们发现呢，这又有新的logo地址，包括我们拿到这个地址，我们直接复制，我们看一下能不能访问图片。回车图片在这呢，也是正确下载打开。这块是没问题的，所以我们这个文件上传就测试通过了，那最终在表单的logo区就会动态的填充上我们最终文件的上传地址。那最终我们实现到的效果就是呢，我们想要上传，我们会点击新增，点击上传的时候。我们先会发请求，找服务端去来要这个policy签名数据，要到签名数据以后再去给阿里云提交请求，当然第一个还是跨域的option，第二个将真正的数据以及我们policy拿到的相关内容全部提交给阿里云，包括我们这个文件。

阿里云进行相关的验证和存储。那至此呢，我们整个文件的上传就不用经过我们自己的服务器了，那下一节课呢，基于这个功能，我们就整个测试一下品牌的新增以及修改。