开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师管理-上传讲师头像(前端实现)】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11353
讲师管理-上传讲师头像(前端实现)
内容简介
一、添加讲师实现上传头像前端整合
二、在添加讲师页面，创建上传组件，实现上传功能
三、添加讲师页面使用这个复制上传组件
四、使用组件
五、引入组件和声明组件
六、修改上传接口地址
七、编写 close 方法和上传成功的方法
一、添加讲师实现上传头像前端整合
这个过程比较简单，主要用到了 ui 中的上传组件。都是固定的组件中的东西，直接复制修改就可以，接下来进行复制整合。
在添加讲师表单页面中加一个上传组件，让用户能上传头像。
二、在添加讲师页面，创建上传组件，实现上传功能
组件使用 element-ui 组件就可以实现。直接在之前的 element 网站寻找是可以的，现在为了样式更加美观，寻找第三方组件
寻找组件：在资源中，有前端相关资源中有俩个压缩文件。分别为171kb 和921kb，921kb有更强大功能，171kb 为简约功能，所以921kb 中有更美观的上传样式，可以在里面寻找组件进行复制。
现在到源码里面找到组件，复制到前端项目 src（components里面）
到源码中复制，找到当前的项目，有 src 把它直接粘贴。
复制之后的效果：
三、添加讲师页面使用这个复制上传组件
在 views 下 edu 中有个 sava.vue 组件，
从课件复制上传组件代码（这个代码不需要敲，是固定的，直接复制改就可以）
讲师头像：TODO 的意思：去做
在以后的公司中，如果出现这个 TODO 这个单词，证明这个代码是需要完善或修改的。
复制< !—
v-show :是否显示上传组件
: key:类似于 id，如果一个页面多个图片上传控件，可以做区分: url:后台上传的 url地址
@close:关闭上传组件
@crop-upload-success : 上传成功后的回调-->
<image-cropper
v-show=""imagecropperShawv"
:width=300”
: height="300""
:key="imagecropperKey"
: url=""BASE_API+" f admin/oss/file/upload"
"field="file”"
close="close"
@crop-upload-success="cropSuccess" />
<el-form-item是表单项
上述内容解释：
image 表示头像，它要显示讲师的头像
button 按钮是更改头像，通过一个框来上传
<image-cropper
v-show=""imagecropperShawv"
:width=300”
: height="300""
:key="imagecropperKey"
: url=""BASE_API+" f admin/oss/file/upload"
"field="file”"
close="close"
@crop-upload-success="cropSuccess" />
上述是真正要上传的内容，阿贾克斯默认不能直接上传文件，不支持直接创文件，这种上传不是阿贾克斯，而是列为一种提交表单方式。
v-show：弹框。这个值=true点击更换头像上述内容就会弹出来。
width:宽
height:高
key:标签中的id属性
url:表单提交的路径
field:name 值<input type="file" name="file" />表示文件上传输入项，
组件的两种方法：close(关闭弹框的方法)
crop-upload-success(上传成功)
先在里面写几个值，查看效果如何，
"BASE_API+" / admin/oss/file/upload’在里面要写请求接口的地址，比如http://localhouse 这个接口地址，因为 Loaclhouse 都被写在了http: i i localhost:9001"",所以取下API端口号：BASE_API
avatar:
},
//上传弹框组件是否显示
imagec ropperShow:false,
imagecropperKey:0,//上传组件 key 值
BASE_API:process.env.BASE_API//获取dev.env,js里面地址。
saveBtnDisabled:false//保存按钮是否禁用.
以上就是获取到了一些初始值的数据，最后将close和cropsuccess方法
methods:{
c lose() {//关闭上传弹框的方法
},
//上传成功方法
cropSuccess（）
在组件中等于号左边的内容是固定的，右边的值可以修改。
最后查看页面效果如何，再修改功能：
点击添加讲师，页面最下端有个更换头像，里面会有个圆圈显示头像。
组件位于components中的inagecropper和pathumb两个组件，
之后需要进行声明才能应用组件
export default {
c omponents: { ImageCropper，PanThumb },
现在基本的方法就有了只需要最后两个方法。
点击添加讲师，下面有个圆圈，圆圈的效果为左右移动，只不过现在没有上传，点击更换头像就会弹出一个框，在弹出的框中可以在本地选择一个图片，图片有原始的图片和变成头像之后的图片，也可以调节图片大小，点击保存，就可以上传，点击×之后就会调用close方法，点击保存之后就会调用cropsuccess方法。
四、使用组件
*data()定义变量和初始值
//上传弹框组件是否显示
imagecropperShow :false,
imagecropperKey:0,11上传组件 key 值
BASE_API;process.env.BASE_API，//获取 dev.env.js 里面地地址
五、引入组件和声明组件
引入组件：import ImageCropper from "@/ c omponents/ ImageCropper"import PanThumb from '@/ components/PanThumb'
声明组件：
export default {
c omponents: { ImageCropper，PanThumb },
按照这个过程把上传组件就整合到里面。
六、修改上传接口地址
Base_api 取得是 localhoost：9001这个不需要改变，在后面加上接口地址：:ur1="BASE_API+ " / eduoss/fileoss"不修改就没有效果。
七、编写close方法和上传成功的方法
更换头像的时候弹出框，如何弹出框，当值等于fase的时候就弹出框，则当值等于fase 的时候就关闭框，
methods:{
c lose() { //关闭上传弹框的方法
this.imagec ropperShow=false
}，
l/上传成功方法
cropSuccess(data) {
this.imagec ropperShow=false
//上传之后接口返回图片地址
This.teacher.avatar=data.url 将这个值赋值给 avatar
这个写法跟 response.data.url 类似
代码整合就完成了，第一个关闭弹框，第二个关闭弹框，之后将端口号赋值给 avatar。
刷新，点击更换头像，弹出框，点击×关闭，随意上传一个图像如下图所示，可以随意调节图片大小，点击保存就可以上传头像，方框关闭了，但是图像保存了，样式也是我们选择的样式。
到 oss 管理控制台中查看上传的文件，点击 bucket 列表，文件管理，点击上传文件，根据时间可以找到我们上传的文件，主要是要上传到数据库，先随意填写讲师表单，点击保存后，来到表中。
下述内容中方框中的值为我们上传内容的地址，以上就是添加讲师上传功能。
注意：
我们上传图片的名字在上传地址中可以看到被修改，这是框架组件转换的，无论上传什么图片最后都会被转换成这个名字，因为上传图片可能会有中文名称就会产生问题，所以会全部转换成 file.Png.在课间中做地址时，可以写一个默认的图片，当不上传时，就可以使用默认的图片。
