27.upload组件以及更新系统平面图

一、upload组件

1、前端

1.1、创建一个el-dropdown-item和dialog对话框

实现学校的二维平面图的上传管理，要有这个功能才能够根据我们不同的学校进行定制化的一个需求处理。我们虽然整个项目是spring boot也能够进行上传，我们得写好上传的一个接口。

 

1.2 、在对话框放入update组件

 action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15">

这个就是我们将来写好的后端接口的一个地址，只要放上去之后它就会自动往这个接口上传入图片。multiple是允许传多张，我们这里就不用了。

 

 它这个上传进度条是这个update组件自带的。

2.后端

我们没跟任何的账号进行绑定，所以我们整个文件上传的话就不再依赖数据库的一个存储，我们直接把文件上传到某个文件夹下进行管理，再由前端去访问这个路径拿到数据就可以了。

所以我们在写代码的时候也不需要pojo和DAO这个数据接口层了，我们直接从service和control开始写就可以了。

 3.实现

 后端接口已经写好了，但是由前端一发起这个post的请求报了一个401，是因为我们这个请求不再由axios拦截器去发了，而是由我们el-upload组件用原始的post方式传给了后端。我们也不知道它自己怎么封装的，但它告诉我们可以自己通过data携带额外的值给后端。所以我们就定义了一个data，里面有一个对象token，用post的方式把token传过去。

 

 为什么把它放在static这个文件夹下呢，就是后端把它存好之后，我们能够直接通过前端能访问到这个静态资源目录，所以我们把它放在static这个文件暴露出来成为我们的静态资源的一个管理目录，前端就可以直接能访问到pg.jpg了。

接下来在yml里面加上新的东西就是static-path-pattern的一个路径，把static下面所有的给暴露出来，"static-path-pattern: /static/**"指定静态资源的一个格式。这样你访问的时候的话只要通过/static就能看到我们这个目标的内容了。

 在拦截器中做个排除，把我们staticPath拦截排除。

 二、更新系统平面图

1.替换之前的图片

2、跨域问题

我们看到有报错，图片并没有出来。我们会发现会有跨域问题，对于我们的img标签是没有跨域限制的，但通过canvas绘制的这种东西有跨域问题，因为之前我们写的admin代理的，现在是static，所以出现了跨域问题。

 我们现在就让static允许跨域，我们在后端主动的为前端加上允许跨域的内容。

 此时前端就可以拿到数据了。

 接下来把前端之前写的所有的bg.jpg换掉就可以了，我们提前配置个字段，在字段中写上我们需要的路径，然后把这个字段换到图片路径的位置就可以了。

然后我们用搜索找出全部的，我们把它改成url导入的这种方式来

 

 其他也都是如此给换完。

由于后端是这张图片，所以现在前端访问哪个页面都是基于它的。

3、对话框消失和页面刷新 

更新学校平面图对话框消失，页面还需要重新加载一遍，因为我们不知道它是在哪一个页面中用的导航栏的更新学校平面图，所以直接索性让这个页面重新reload一遍。我们去看一下文档有没有成功的回调函数，因为现在明显是成功状态。

 注意：这个是属性，不是事件

好了，此项目就此完结。🎉🎉🎉