开发者学堂课程【Spring Boot+Vue.js+FastDFS实现分布式图片服务器 ：案例开发-前端开发及调试（一）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/742/detail/13148
案例开发-前端开发及调试（一）
内容介绍
一、前端页面编写
二、配置 Nginx
三、解决跨域问题
四、获取原始文件名
五、预览功能
六、总结
一、前端页面编写
1.前端工程已经搭建完毕，el 库和 js 库已经加进工程，最终需要实现的效果就是需求分析中用户进行图片上传，图片上传使用 element-ui 的组件，在百度搜索进入其官网：
element-cn.eleme.io/#/zh-CN/component/upload 后点击组件，找到 upload 上传
可以看到各式各样的图片上传的效果。选择此组样式作为前端上传图片的最终样式。因为点击上传图片可以预览到图片。
2.如何使用 element-ui 组件呢？需要创建 VUE 的实例。
在创建好基本框架后，引入 vue.min.js 文件后 编写 js 代码
3.将 el 部分拷贝到 body 下面的 div 中。
<body>
<div id=’app’>
<el-upload
action="http：//localhost：22100/fileSystem/upload"
//上传路径 是后台部分中 controller 中的 fileSystem
list-type="picture-card" //图片墙样式
:on-preview="handlePictureCardPreview” //生成预览 点击已上传的文件链接时的钩子，可以通过file.response 拿到服务端返回数据;因为是一种方法所以需要在 method 区域编写。
//:on-remove="handleRemove"> 删除文件暂时不需要实现。
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible”>
< img width="100%”
:src="dialogImageUrl" alt="">
</el-dialog>
</div>
<script>
var vm=new Vue({ //创建 vue 实例
el：“app” //定义 vue 实例的对象的范围 div 中的所有 dom 元
素都归 vue 管理
data：{
dialogVisbile：false //对话框是否可用
dialogImageUrl：’‘
} //数据对象区域 数据区与 dom 元素进行双向绑定。
methods:{
handlePictureCardPreview（file）{
写入这个方法的时候会报错，是因为需要 es6 以上才支持，所以打开 settings，找到 JavaScript，将版本改为 ES6 即可
}；} //方法区域 定义方法
//以上三部分是 vue 的固定格式
})
</script>
二、配置 Nginx
1.因为前端项目会部署在 Nginx 上面，所以可以在 Nginx 上面配置虚拟目录，将 upload.html 引入其中即可。
进入本机 Nginx 配置文件，配置虚拟目录。
2.在 server 下面有图片服务测试，端口为7283，将路径改为正确路径。修改路径之后重启 Nginx（本机的 Nginx），重启代码：\Nginx.exe -s reload
3. 现在通过 Nginx 访问本机7283端口。
localhost：7283/upload.html
由于前方地址缺少所以报错，进行修改添加 fastdfs-ui。再此重启 Nginx
4.发现 console 报错：dialogVisbile 和 dialogImageUrl 没有定义。
回到编辑器：
dialogVisbile 这个变量就是双向数据绑定，dialogImageUrl 图片路径，需要再在数据区域进行定义。定义好后回到浏览器刷新即可出现下面的页面
5.但是在选择图片的时候会报错：提示找不到文件路径。当选择文件的时候就会去请求 action，而 action 路径是绝对路径，本次访问的端口是7283，但是后端写的端口号是22100。
只需要将掐断 action 的地址改为22100端口的绝对路径即可。前端网页请求22100端口的服务器进行上传图片，将路径改为：
action="http：//localhost：22100/fileSystem/upload"
回到浏览器刷新，即可成功上传图片。
