07-素材管理-添加素材
- 点击添加素材时候
- 显示对话框组件（上传图片组件）
- 点击上传图片
- 选择图片，确认选择之后，上传图片给后台
- 响应图片的地址给前端，进行预览（提示上传成功）
- 2s之后，自动关闭对话框，回到第一页更新列表。
对话框组件网址：dialog对话框-打开嵌套表单模式
https://element.eleme.cn/#/zh-CN/component/dialog
1.准备对话框：
div盒子中添加组件素材：
<!-- 对话框 -->
<el-dialog title="添加素材" :visible.sync="dialogVisible" width="300px">
<!-- 上传组件 -->
<div slot="footer" class="dialog-footer">
上传组件占位
<el-button @click="dialogVisible = false">取 消</el-button>
</div>
</el-dialog>
data中申明数据：
// 控制对话框的显示与隐藏
dialogVisible: false
div盒子的对话框组件中添加事件：
<!-- 绑定打开对话框事件 -->
<el-button @click="openDialog()" style="float:right" type="success" size="small">添加素材
methods方法中：
// 打开对话框
openDialog () {
this.dialogVisible = true
// 完成其他业务
},
2.准备上传组件：
-
需要把样式写在公共样式组件里 styles/index.less
-
action 上传图片的地址
- 上传请求是el-upload组件发送，需要使用完整地址；
- 只有axios发送请求，才有默认的基准地址能省去，只写后面的地址即可，且不用设置请求头。
-
headers 在头部携带token
- Authorization : 'Bearer ’ + store.getUser().token
-
on-success 上传成功的钩子函数（回调函数）
- 绑定上传图片成功的处理函数
-
数据：imageUrl
- 有值，进行图片预览
- 没值，显示上传图标
-
上传图片的字段名称默认的是file
- 根据接口的需要去修改（image）
- el-upload的属性 name
upload上传-用户头像上传模式-组件-地址：upload上传组件-用户头像模式
https://element.eleme.cn/#/zh-CN/component/upload
div盒子中添加组件素材：替换组件占位
<!-- 上传组件 -->
<el-upload
class="avatar-uploader"
action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
:headers="headers" <!-- 携带的token -->
name="image"
:show-file-list="false"
:on-success="handleSuccess">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
data中进行数据配置：
// 上传图片的请求头配置,携带token
headers: {
//配置请求头，需要script中导入store： import store from '@/store'，
Authorization: 'Bearer ' + store.getUser().token
},
// 预览图片的地址
imageUrl: null
methods中的方法：
// 上传图片成功
handleSuccess () {
},
3.上传成功业务逻辑：
- 预览图片 且 有成功提示
- 2s后，关闭对话框 且 第一页更新列表
methods中的方法：
// 上传图片成功
handleSuccess (res) {
// 提示 与 预览
this.$message.success('上传素材成功')
// res 是后台的响应主体 预览地址res.data.url
this.imageUrl = res.data.url
// 2s后 关闭对话框 第一页更新列表
//setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
window.setTimeout(() => {
this.dialogVisible = false
this.reqParams.page = 1
this.getImages()
}, 2000)
},
// 打开对话框
openDialog () {
this.dialogVisible = true
// 完成其他上传渲染业务 要清空预览图
this.imageUrl = null
},
