当选择图片上传时前后端是如何配合操作的?
前端找到检疫登记的index.vue查看相关代码
通过ctrl+f全局搜索
我们要实现当上传照片后自动生成一个图片地址并且是可以在浏览器访问到的地址
注:文件上传必须是post请求
因为文件路径要转换成二进制放在请求体中，get没有请求体
在前端utils包下找到common.js将上传文件路径的端口号改成我们自己的，并且查看接口和二级接口
在项目中的controller层下面新建UploadController类作为文件上传模块
同时需要加相应注解
然后定义一个本地上传的方法localUpdate(对象为MultipartFile file)
文件名称从前端获得
我们要返回的src是imgUrl
MultipartFile由spring mvc提供
方法上加postMapping 通过前端查看路径
基于http协议访问电脑中的资源:
而不是只是一张桌面地址的图片或者文件地址，这样浏览器是访问不到的
使用nginx静态服务器进行反向代理
1.在D盘创建pts_resource文件夹将来使用nginx代理监听这个包下面的资源
2.执行后端代码再回到浏览器检疫模块随意上传一张图片，transferTo会将图片转发过到我们自定义的路径下
如果上传任意一张jpg格式的图片最后也会上传到我们指定的文件路径下并且会覆盖掉之前上传进来的图片，格式会转换成png
3.我们想保留源文件的后缀名，也就是将上传的图片使用自己原有名字保留在pts_resource中，使用固定名称1.png会改变源文件名称
调用
4.也要保证每一张图片名字不重复，只拿到源文件格式名 如:png
使用.分割数组，拿取mp4，原来数组长度为4，要拿到索引为3的mp4，使用长度-1就拿到了，产生的文件名叫做uuid自动生成的字符串拼接上.和源文件后缀名
最后输出在我们指定文件路径下
5.我们一般随机生成的文件名是通过时间自动命名的，uuid生成的不符合我们大众使用的命名
6.纳秒Nano和毫秒差1000000
7.我们在pts下新建一个Utils封装工具类，实现时间格式命名的图片
8.创建FileNameUtils类
实现 拿取源文件后缀名+生成时间格式形成一个图片名
一般工具类是一个静态方法 因为可以通过类名调用
测试类进行测试
最终在controller实现功能
我们要实现生成的图片命名地址自动映射在图片下方，使用nginx代理
1.下载nginx压缩包
2.解压至D盘
通过nginx访问文件资源步骤 见此博客
最终实现图片上传同时映射路径，将上传的文件转存到自己指定的目录下
