分布式架构下的文件上传（前端测试上传功能）

前面已经写好了后端的Policy签名，现在在前端测试一下上传
单文件上传（品牌LOGO文件）：
一、在Element UI组件库里找到Upload上传模板，修改地址
地址为bucket的域名


二、在需要上传的页面导入组件
导入组件后需要在export default里声明组件
components:{SingleUpload:SingleUpload}

三、在需要上传的页面把原来的输入框替换成我们的上传组件

这里有个绑定的方法


四、测试上传
可以看到这里data在后端中是没有的。

后端返回的policy签名可以拿到，但是没有data数据。
所以在控制层，把policy签名直接封装在hashmap中扔给前端。

!](https://img-blog.****img.cn/20200803215255235.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L015Y2FpbmFvX0dhbw==,size_16,color_FFFFFF,t_70)

五、配置阿里OSS跨域
阿里云默认是不允许跨域访问，所以需要在阿里云配置一下跨域

OSS跨域

点击设置–》创建规则：允许所有的来源，以及请求方式、请求头

设置好后重新上传文件。


OK 搞定！