# 六、素材管理## 創建組件并配置路由1、創建 `src/views/image/index.vue````html <template><div class="image-container">素材管理</div> </template><script> export default {name: 'ImageIndex',components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},methods: {} } </script><style scoped lang="less"></style>```2、配置頁面路由<img src="assets/image-20200426174126093.png" alt="image-20200426174126093" style="zoom:50%;" />## 頁面布局- [Layout 布局](https://element.eleme.cn/#/zh-CN/component/layout) - [Image 圖片](https://element.eleme.cn/#/zh-CN/component/image)```html <template><div class="image-container"><el-card class="box-card"><div slot="header" class="clearfix"><!-- 面包屑路徑導航 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item to="/">首頁</el-breadcrumb-item><el-breadcrumb-item>素材管理</el-breadcrumb-item></el-breadcrumb><!-- /面包屑路徑導航 --><!-- <el-button style="float: right; padding: 3px 0" type="text">操作按鈕</el-button> --></div><div style="padding-bottom: 20px;"><el-radio-group v-model="radio1" size="mini"><el-radio-button label="全部"></el-radio-button><el-radio-button label="收藏"></el-radio-button></el-radio-group></div><!-- 素材列表 --><el-row :gutter="10"><el-col :xs="12" :sm="6" :md="6" :lg="4"><el-imagestyle="height: 100px"src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"fit="cover"></el-image></el-col><el-col :xs="12" :sm="6" :md="6" :lg="4"><el-imagestyle="height: 100px"src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"fit="cover"></el-image></el-col><el-col :xs="12" :sm="6" :md="6" :lg="4"><el-imagestyle="height: 100px"src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"fit="cover"></el-image></el-col><el-col :xs="12" :sm="6" :md="6" :lg="4"><el-imagestyle="height: 100px"src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"fit="cover"></el-image></el-col><el-col :xs="12" :sm="6" :md="6" :lg="4"><el-imagestyle="height: 100px"src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"fit="cover"></el-image></el-col><el-col :xs="12" :sm="6" :md="6" :lg="4"><el-imagestyle="height: 100px"src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"fit="cover"></el-image></el-col><el-col :xs="12" :sm="6" :md="6" :lg="4"><el-imagestyle="height: 100px"src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"fit="cover"></el-image></el-col><el-col :xs="12" :sm="6" :md="6" :lg="4"><el-imagestyle="height: 100px"src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"fit="cover"></el-image></el-col></el-row><!-- /素材列表 --></el-card></div> </template><script> export default {name: 'ImageIndex',components: {},props: {},data () {return {radio1: '全部'}},computed: {},watch: {},created () {},mounted () {},methods: {} } </script><style scoped lang="less"></style>```## 展示素材列表1、封裝獲取素材列表數據請求方法```js /*** 獲取素材列表*/ export const getImages = params => {return request({method: 'GET',url: '/mp/v1_0/user/images',params}) } ```2、在素材管理頁面組件中加載獲取數據<img src="assets/image-20200426174330909.png" alt="image-20200426174330909" style="zoom:50%;" />3、模板綁定<img src="assets/image-20200426174401448.png" alt="image-20200426174401448" style="zoom:50%;" />## 數據篩選<img src="assets/image-20200426174544560.png" alt="image-20200426174544560" style="zoom:50%;" /><img src="assets/image-20200426174518520.png" alt="image-20200426174518520" style="zoom:50%;" />## 上傳素材### 處理對話框1、添加對話框組件<img src="assets/image-20200426174751883.png" alt="image-20200426174751883" style="zoom:50%;" />2、點擊按鈕顯示對話框<img src="assets/image-20200426174814956.png" alt="image-20200426174814956" style="zoom:50%;" />### 使用 upload 上傳組件1、配置使用 upload 上傳組件<img src="assets/image-20200426174912332.png" alt="image-20200426174912332" style="zoom:50%;" />2、上傳成功處理<img src="assets/image-20200426174948840.png" alt="image-20200426174948840" style="zoom:50%;" />## 數據分頁## 收藏/取消收藏圖片## 刪除圖片

?

總結

以上是生活随笔為你收集整理的前端学习（2458）：素材管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。