开发者学堂课程【Spring Boot+Vue.js+FastDFS实现分布式图片服务器 ：案例开发-前端开发及调试（二）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/742/detail/13148
案例开发-前端开发及调试（二）
三、解决跨域问题
1.前端端口7283要想访问22100端口是需要跨域问题的解决。在前后端分离开发的时候最常用的跨域解决方案是通过代理
可以将前端的地址前面干掉即（http：//localhost：22100）
action="/fileSystem/upload"
通过7283的 Nginx 代理转发就可以解决跨域问题
2.代理转发：配置 fileSystem 转发代理
在 Nginx7283 服务中 凡是以 /fileSystem 开头的 都让其转发到
http：//127.0.0.1：22100/filesystem/
这就是通过代理解决跨域问题的方法。
重启服务器，再刷新浏览器，上传图片，断点进入，鼠标当上 file ，看到文件已经进入。图片上传成功，接下来进行获取其原始文件名、拓展名。
四、获取原始文件名
1.图中步骤：向 upload 目录传入已经上传的文件。将刚上传问文件上传到 web 服务器上的 upload 目录下面。将程序向下走一步，在 upload 下面就可以刚看到刚刚上传的 png 图片，则代表图片上传成功。
2.接下来向 fastDFS 中上传图片，可以得到文件的 ID，但是可以发现的是，ID 中多了一个点，本身 extention 拓展名自带一个点，自动将点累加到后面。所以需要修改程序。
如果本身文件有拓展名，那么 extention 可以改为 null，他会自动获取其拓展名。
这样获取到的文件 ID 就是正确的。
3.将获取到的图片放到 Nginx 服务中，以背不时之需 。
4.在将来开发的时候，如果文件上传成功就能获取相应的 ID，就可以将上传文件的路径，和商品信息能够在数据库进行存储绑定。查询商品就可以将文件的 upload 的地址拿到，就可以在页面显示图片。
在回到浏览器，跟踪结果的时候，最终返回了 JSON 数据，并且 json 数据中就有上传文件的路径。以上则代表上传图片成功。
查看其原始代码
五、预览功能
1.点击加号并没有反应，不能预览。打开 el 组件使用说明。当要进行预览的时候，他会通过钩子方法来调用 on-preview
2.需要完成 on-preview 进行预览。
:on-preview="handlePictureCardPreview” //预览方法定义
在method中：{handlePictureCardPreview(file) //传入 file 参数
console.log(file)可以在控制台打印一下查看 file 具体内容
this.dialogImageUrl=file.response.filePath;
this.dialogVisbile=true;
}
3.{...}就是 file 对象
最重要把文件的真实路径赋值给 dialogImageUrl（vue 实例中的字段）,让 file 下面的 response.filePath 等于dialogImageUrl；并且在预览的时候需要将 dialogVisbile设置为true
再次刷新运行
4.不能够成功运行，显示找不到图片，原因是：图片通过 Nginx 访问，需要访问192.168.101.64
将图片服务器的地址添加即可成功预览图片。
this.dialogImageUrl =”http://192.168.101.64/"+file.response.filePath”
5.右键检查查看图片地址。发现该地址来源于 fastDFS 分布式文件系统得地址，所以复制地址连接就可以在浏览器直接查看。这就是文件上传，最终上传到 fastDFS 中，并且预览的时候也从 fastDFS 中获取。
到这里就将前端部分实现完成。
六、总结
1.做前端开发需要确定使用的 js 和 css 的库，在这里面用到了 vue.js 和 element.ui，将两个库放入工程当中，并且在 html 中引入库，可以在 element 官网打开说明文档，根据提示将 el 代码复制到 div（ vue 数据区）中 vue 创建格式三大部分：el、数据区、方法区以及一些钩子方法。
2.上传完成之后，钩子方法：预览。当点击预览的时候会调用方法，这个方法将刚刚上传的文件的数据对象传进来，最终就实现了前端 vue 实现文件上传。
3.首先将文件上传 到 web 服务器，web 服务器将文件上传到 fastDFS 文件系统，当用户预览的是时候通过 Nginx 图片服务代理，浏览转发到 fastDFS 文件系统，最终就完成了整个案例的开发。
4.用户浏览图片，用户打开网站，查看商品，浏览图片，刚刚已经讲过，在上传成功图片之后，fastDFS 文件系统会给我 fileID 文件的路径，需要将文件路径存到商品表的图片字段中。将来查询商品信息的时候，就可以将 fastDFS 文件路径查询到。最终可以实现通过 Nginx 浏览文件。
