添加 disk 相关页面和接口

src/api/disk.js

@@ -0,0 +1,24 @@
+import { delete0, get, post } from '@/utils/request'
+
+const diskApi = {
+  getFolderTreeApi: '/api/account/disk/folder/tree',
+  addDiskFileApi: '/api/account/disk/file',
+  deleteDiskFileApi: '/api/account/disk/file',
+  getFileListApi: '/api/account/disk/list'
+}
+
+export function getFolderTree() {
+  return get(diskApi.getFolderTreeApi)
+}
+
+export function addDiskFile(jsonData) {
+  return post(diskApi.addDiskFileApi, jsonData)
+}
+
+export function deleteDiskFile(fileIds) {
+  return delete0(diskApi.addDiskFileApi, fileIds)
+}
+
+export function getFileList(form) {
+  return get(diskApi.getFileListApi, form)
+}

src/components/upload/PublishVideo.vue

@@ -226,11 +226,11 @@ export default {
   methods: {
     // ****************************************************************************************************************
     onFileAdded(file) {
-      if (file.file.size > 1024 * 1024 * 1024 * 5) {
+      if (file.file.size > 1024 * 1024 * 1024 * 10) {
         file.cancel()
         this.$notify({
           title: '提示',
-          message: '视频文件应小于 5GiB',
+          message: '视频文件应小于 10GiB',
           type: 'warning',
           duration: 3000
         })

src/router/index.js

@@ -73,6 +73,10 @@ const UserList = () => import('views/admin/UserList')
 const PostList = () => import('views/admin/PostList')
 const DataSource = () => import('views/admin/DataSource')
 
+const Disk = () => import('views/disk/Disk')
+const FileList = () => import('views/disk/FileList')
+const UploadFile = () => import('views/disk/UploadFile')
+
 // ********************************************************************************************************************
 // 使用安装路由插件
 Vue.use(VueRouter)
@@ -281,6 +285,45 @@ const routes = [
     ]
   },
   // ********************************************************************************************************************
+  {
+    path: '/disk',
+    name: 'Disk',
+    component: Disk,
+    meta: { needAuth: true },
+    children: [
+      {
+        path: '/disk/list',
+        name: '文件',
+        component: FileList,
+        meta: { needAuth: true }
+      },
+      {
+        path: '/disk/upload',
+        name: '上传',
+        component: UploadFile,
+        meta: { needAuth: true }
+      },
+      {
+        path: '/disk/image',
+        name: '图片',
+        component: SiteConfig,
+        meta: { needAuth: true }
+      },
+      {
+        path: '/disk/video',
+        name: '视频',
+        component: UserList,
+        meta: { needAuth: true }
+      },
+      {
+        path: '/disk/audio',
+        name: '音频',
+        component: UserList,
+        meta: { needAuth: true }
+      }
+    ]
+  },
+  // ********************************************************************************************************************
   {
     path: '/timeline',
     name: 'TimelineIndex',

src/views/disk/Disk.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-container>
+    <el-aside id="aside-style">
+      <el-menu
+        :default-active="this.$route.path"
+        router
+        class="el-menu-vertical-demo"
+        :collapse="isCollapse"
+        @open="handleOpen"
+        @close="handleClose"
+      >
+        <el-menu-item index="/disk/list">
+          <i class="el-icon-files" />
+          <span slot="title">文件</span>
+        </el-menu-item>
+        <el-menu-item index="/disk/image">
+          <i class="el-icon-picture" />
+          <span slot="title">图片</span>
+        </el-menu-item>
+        <el-menu-item index="/disk/video">
+          <i class="el-icon-video-camera" />
+          <span slot="title">视频</span>
+        </el-menu-item>
+        <el-menu-item index="/disk/audio">
+          <i class="el-icon-headset" />
+          <span slot="title">音频</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-main>
+      <!--      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
+      </el-breadcrumb>-->
+      <router-view />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: 'Disk',
+  data() {
+    return {
+      isCollapse: false,
+      navList: [
+        { path: '/my/account', name: '我的帐号', icon: 'el-icon-upload' }
+      ]
+    }
+  },
+  /*  watch: {
+    // 地址栏 url 发生变化时重新加载本页面
+    $route() {
+      this.$router.go()
+    }
+  },*/
+  created() {
+    document.title = '网盘主页'
+  },
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath)
+    }
+  }
+}
+</script>
+
+<style>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 800px;
+}
+
+#aside-style {
+  min-width: 120px;
+  max-width: 240px;
+  width: 30%;
+}
+</style>

src/views/disk/FileImage.vue

@@ -0,0 +1,250 @@
+<template>
+  <div v-if="!permissionDenied">
+    <el-row class="movie-list">
+      <el-col :md="24">
+        <el-card :if="!user" :body-style="{ padding: '0px' }" class="card">
+          <div slot="header" class="clearfix">
+            <el-row>
+              <el-col :md="1">
+                <el-avatar>
+                  <el-image :src="user.avatarUrl" />
+                </el-avatar>
+              </el-col>
+              <el-col :md="23">
+                <router-link target="_blank" :to="`/user/${user.userId}/image`">
+                  <span>{{ user.screenName }}的相册</span>
+                </router-link>
+                <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
+                <el-button
+                  type="danger"
+                  size="mini"
+                  :icon="followButton.icon"
+                  @click="followUser(user.userId)"
+                >
+                  <span>{{ followButton.text }}</span>
+                </el-button>
+                <el-button
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-message"
+                  @click="sendMessage(user.userId)"
+                >
+                  <span>发消息</span>
+                </el-button>
+              </el-col>
+            </el-row>
+            <el-row>
+              <br>
+              <span>{{ data.albumName }}</span>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :md="24" class="movie-list">
+        <div>
+          <el-col v-for="(image, index) in data.images" :key="image.thumbnailUrl" :md="6" :sm="12" :xs="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+            <el-card :body-style="{ padding: '0px' }" class="card">
+              <div class="imgs">
+                <el-image
+                  lazy
+                  fit="cover"
+                  class="coverImg"
+                  :src="image.thumbnailUrl"
+                  @click="showImages(index)"
+                />
+              </div>
+              <div style="padding: 14px;">
+                <span>
+                  <i v-if="image.collected" class="el-icon-star-on" @click="collectItem(image)" />
+                  <i v-else class="el-icon-star-off" @click="collectItem(image)" />
+                </span>
+              </div>
+            </el-card>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+  <div v-else>
+    <permission-denied-card :text-object="textObject" />
+  </div>
+</template>
+
+<script>
+import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
+import { followUser, getUserInfo, unfollowUser } from '@/api/user'
+import { getAlbum } from '@/api/image'
+import { collectItem } from '@/api/collect'
+
+export default {
+  name: 'FileImage',
+  components: { PermissionDeniedCard },
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      user: null,
+      followButton: {
+        icon: 'el-icon-plus',
+        text: '关注'
+      },
+      data: null,
+      dataList: [],
+      permissionDenied: false,
+      textObject: {
+        content: '相册',
+        route: '/image'
+      }
+    }
+  },
+  created() {
+    const albumId = this.$route.params.albumId
+    getAlbum(albumId).then(resp => {
+      if (resp.code === 0) {
+        const respData = resp.data
+        document.title = '相册 - ' + respData.albumName
+
+        this.data = respData
+        this.userId = respData.userId
+        getUserInfo(this.userId).then(resp => {
+          if (resp.code === 0) {
+            this.user = resp.data
+          } else {
+            this.$notify.error({
+              message: resp.msg,
+              type: 'warning',
+              duration: 3000
+            })
+          }
+        })
+      } else if (resp.code === 2) {
+        this.$router.push('/404')
+      } else {
+        this.permissionDenied = true
+      }
+    }).catch(error => {
+      this.$notify.error({
+        message: error.message,
+        type: 'error',
+        duration: 3000
+      })
+    })
+  },
+  mounted() {
+    // 当窗口宽度改变时获取屏幕宽度
+    window.onresize = () => {
+      return () => {
+        window.screenWidth = document.body.clientWidth
+        this.screenWidth = window.screenWidth
+      }
+    }
+  },
+  methods: {
+    followUser(userId) {
+      if (this.followButton.text === '关注') {
+        followUser(userId).then(resp => {
+          if (resp.code === 0) {
+            this.followButton.text = '已关注'
+            this.followButton.icon = 'el-icon-check'
+          }
+        })
+      } else {
+        unfollowUser(userId).then(resp => {
+          if (resp.code === 0) {
+            this.followButton.text = '关注'
+            this.followButton.icon = 'el-icon-plus'
+          }
+        })
+      }
+    },
+    sendMessage(userId) {
+      console.log('发送消息')
+    },
+    showImages(index) {
+      const imageUrls = []
+      for (const i of this.data.images) {
+        imageUrls.push(i.originalUrl)
+      }
+
+      this.$viewerApi({
+        images: imageUrls,
+        options: {
+          initialViewIndex: index,
+          movable: true,
+          fullscreen: false,
+          keyboard: true
+        }
+      })
+    },
+    collectItem(image) {
+      const jsonData = {}
+      jsonData.contentType = 1001
+      jsonData.contentId = image.imageFileId
+      if (image.collected) {
+        jsonData.collected = false
+        collectItem(jsonData).then(resp => {
+          if (resp.code === 0) {
+            this.$notify({
+              title: '取消收藏图片',
+              type: 'info',
+              duration: 3000
+            })
+            image.collected = false
+          }
+        })
+      } else {
+        jsonData.collected = true
+        collectItem(jsonData).then(resp => {
+          if (resp.code === 0) {
+            this.$notify({
+              title: '图片已收藏',
+              type: 'info',
+              duration: 3000
+            })
+            image.collected = true
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+
+.coverImg {
+  width: 100%;
+  height: 320px;
+  display: block;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+.imgs {
+  position: relative;
+}
+</style>

src/views/disk/FileList.vue

@@ -0,0 +1,307 @@
+<template>
+  <el-row>
+    <el-row>
+      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
+        <el-form-item>
+          <el-select v-model="searchForm.fileType" placeholder="文件类型" @change="search">
+            <el-option label="全部" value="0" />
+            <el-option label="图片" value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="searchForm.filename" placeholder="" />
+        </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="warning" @click="search">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-form :inline="true" class="demo-form-inline" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-button size="mini" type="danger" @click="goToUpload">上传</el-button>
+        <el-button size="mini" type="danger" @click="downloadFile">下载</el-button>
+        <el-button size="mini" type="danger" @click="deleteMultiple">删除</el-button>
+        <el-button size="mini" type="danger" @click="createNewFolder">新建文件夹</el-button>
+        <el-button size="mini" type="danger" @click="move">移动</el-button>
+        <el-button size="mini" type="danger" @click="move">复制</el-button>
+        <el-button size="mini" type="danger" @click="share">分享</el-button>
+      </el-form>
+      <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/1' }">图片</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/1/2' }">照片</el-breadcrumb-item>
+        <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
+      </el-breadcrumb>
+      <el-table
+        ref="multipleTable"
+        :data="dataList"
+        border
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          type="selection"
+        />
+        <el-table-column
+          prop="filename"
+          label="文件名"
+          width="400px"
+        >
+          <template slot-scope="scope">
+            <a :href="scope.row.filename" style="text-decoration-line: none" target="_blank">
+              <el-tooltip
+                :content="scope.row.filename"
+                raw-content
+                placement="top-start"
+              >
+                <span v-if="scope.row.filename.length <= 60">
+                  {{ scope.row.filename }}
+                </span>
+                <span v-else>
+                  {{ scope.row.filename.substr(0, 55) + "..." }}
+                </span>
+              </el-tooltip>
+            </a>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="owner"
+          label="修改时间"
+        />
+        <el-table-column
+          prop="size"
+          label="大小"
+        />
+        <el-table-column
+          prop="fileType"
+          label="文件类型"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.fileType === 1000" :type="'warning'" disable-transitions>
+              目录
+            </el-tag>
+            <el-tag v-if="scope.row.fileType === 1001" :type="'warning'" disable-transitions>
+              图片
+            </el-tag>
+            <el-tag v-else-if="scope.row.fileType === 1002" :type="'success'" disable-transitions>
+              视频
+            </el-tag>
+            <el-tag v-else-if="scope.row.fileType === 1003" :type="'danger'" disable-transitions>
+              音频
+            </el-tag>
+            <el-tag v-else-if="scope.row.fileType === 1004" :type="'danger'" disable-transitions>
+              文本
+            </el-tag>
+            <el-tag v-else :type="'danger'" disable-transitions>
+              其他
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="cache(scope.row)"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              @click="cache(scope.row)"
+            >分享</el-button>
+            <el-button
+              size="mini"
+              @click="cache(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row>
+      <el-pagination
+        background
+        :small="screenWidth <= 768"
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+    </el-row>
+
+    <!--登录弹窗-->
+    <el-dialog
+      title="创建新目录"
+      append-to-body
+      :visible.sync="newFolderDialog"
+      width="30%"
+      center
+    >
+      <el-form ref="form" :model="newFolderForm">
+        <el-form-item label="目录名">
+          <el-input
+            v-model="newFolderForm.newFolderName"
+            placeholder="新目录名"
+            style="width: 70%; padding-right: 2px"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            @click.native="loginBtn"
+          >创建</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import { getFileList, deleteDiskFile } from '@/api/disk'
+
+export default {
+  name: 'FileList',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [],
+      searchForm: {
+        page: 1,
+        fileType: '0',
+        filename: null
+      },
+      multipleSelection: [],
+      parentDirs: ['图片', '照片', '2023'],
+      newFolderDialog: false,
+      newFolderForm: {
+        newFolderName: null
+      }
+    }
+  },
+  created() {
+    document.title = '文件列表'
+    this.getData()
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.searchForm.page = this.currentPage
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getData() {
+      this.dataList = []
+      getFileList(this.searchForm).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.totalSize = resp.data.totalSize
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    cache(row) {
+    },
+    search() {
+      this.currentPage = 1
+      this.searchForm.page = this.currentPage
+      this.getData(this.searchForm)
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    goToUpload() {
+      const path = '/disk/upload'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
+    downloadFile() {
+      console.log('下载文件')
+    },
+    deleteMultiple() {
+      if (this.multipleSelection.length === 0) {
+        this.$notify({
+          message: '至少应选中一行',
+          type: 'warning',
+          duration: 3000
+        })
+        return
+      }
+
+      var fileIds = []
+      for (const item of this.multipleSelection) {
+        fileIds.push(item.fileId)
+      }
+
+      this.$confirm('确定要删除文件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteDiskFile(fileIds).then(resp => {
+          if (resp.code === 0) {
+            this.$refs.multipleTable.clearSelection()
+            this.$notify({
+              message: resp.msg,
+              type: 'warning',
+              duration: 3000
+            })
+          } else {
+            this.$notify({
+              title: '提示',
+              message: resp.msg,
+              type: 'warning',
+              duration: 3000
+            })
+          }
+        }).catch(error => {
+          this.$notify({
+            title: '提示',
+            message: error.message,
+            type: 'error',
+            duration: 3000
+          })
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    createNewFolder() {
+      this.newFolderDialog = true
+    },
+    move() {
+      console.log('移动/复制文件')
+    },
+    share() {
+      console.log('分享文件')
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/disk/UploadFile.vue

@@ -0,0 +1,249 @@
+<template>
+  <el-row class="movie-list">
+    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
+          <div slot="header" class="clearfix">
+            <span>选择目录</span>
+          </div>
+          <div class="item">
+            <el-tree
+              :accordion="true"
+              :data="treeNode"
+              :props="defaultProps"
+              highlight-current
+              @node-click="handleNodeClick"
+            >
+              <span slot-scope="{ node, data }">
+                <span :class="data.icon">{{ node.label }}</span>
+              </span>
+            </el-tree>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+    <el-col :md="16" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>上传文件到 <span style="color: red">{{ currentDir }}</span></span>
+          </div>
+          <div class="text item">
+            <uploader
+              class="uploader-example"
+              :options="options"
+              :auto-start="true"
+              @file-added="onFileAdded"
+              @file-success="onFileSuccess"
+              @file-progress="onFileProgress"
+              @file-error="onFileError"
+            >
+              <uploader-unsupport />
+              <uploader-drop>
+                <p>拖动文件到此处或</p>
+                <uploader-btn :attrs="attrs">选择文件</uploader-btn>
+              </uploader-drop>
+              <uploader-list />
+            </uploader>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { getServerInfo } from '@/api/content'
+import { addDiskFile, getFolderTree } from '@/api/disk'
+
+export default {
+  name: 'UploadFile',
+  data() {
+    return {
+      // ****************************************************************************************************************
+      options: {
+        target: '//oss.reghao.cn/',
+        chunkSize: 1024 * 1024 * 1024 * 10, // 10GiB
+        fileParameterName: 'file',
+        testChunks: false,
+        query: (file, chunk) => {
+          return {
+            channelId: 1
+          }
+        },
+        headers: {
+          Authorization: ''
+        },
+        withCredentials: true
+      },
+      attrs: {
+        accept: '*'
+      },
+      // ****************************************************************************************************************
+      treeNode: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+        value: 'value'
+      },
+      currentDir: '/',
+      // ****************************************************************************************************************
+      pid: 0,
+      form: {
+        fileUrl: null,
+        imageUrl: null
+      }
+    }
+  },
+  created() {
+    document.title = '上传文件'
+    getServerInfo(1).then(resp => {
+      if (resp.code === 0) {
+        const resData = resp.data
+        this.options.target = resData.ossUrl
+        this.options.chunkSize = resData.maxSize
+        this.options.headers.Authorization = 'Bearer ' + resData.token
+      } else {
+        this.$notify({
+          title: '提示',
+          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
+          type: 'error',
+          duration: 3000
+        })
+      }
+    }).catch(error => {
+      this.$notify({
+        title: '提示',
+        message: error.message,
+        type: 'warning',
+        duration: 3000
+      })
+    })
+
+    getFolderTree().then(resp => {
+      if (resp.code === 0) {
+        this.treeNode = resp.data
+      } else {
+        this.$notify({
+          title: '提示',
+          message: resp.msg,
+          type: 'error',
+          duration: 3000
+        })
+      }
+    }).catch(error => {
+      this.$notify({
+        title: '提示',
+        message: error.message,
+        type: 'warning',
+        duration: 3000
+      })
+    })
+  },
+  mounted() {
+  },
+  methods: {
+    // ****************************************************************************************************************
+    onFileAdded(file) {
+      if (file.file.size > 1024 * 1024 * 1024 * 5) {
+        file.cancel()
+        this.$notify({
+          title: '提示',
+          message: '视频文件应小于 5GiB',
+          type: 'warning',
+          duration: 3000
+        })
+      }
+    },
+    onFileProgress(rootFile, file, chunk) {
+    },
+    onFileSuccess(rootFile, file, response, chunk) {
+      const resp = JSON.parse(response)
+      if (resp.code === 0) {
+        this.form.fileUrl = resp.data.url
+
+        const jsonData = {}
+        jsonData.pid = this.pid
+        jsonData.uploadId = resp.data.uploadId
+        this.addDiskFile(jsonData)
+      } else {
+        this.$notify({
+          title: '提示',
+          message: resp.msg,
+          type: 'warning',
+          duration: 3000
+        })
+      }
+    },
+    onFileError(rootFile, file, response, chunk) {
+      const resp = JSON.parse(response)
+      this.$notify({
+        message: resp.msg,
+        type: 'warning',
+        duration: 3000
+      })
+    },
+    // ****************************************************************************************************************
+    handleNodeClick(data) {
+      console.log(data)
+      this.currentPage = 1
+      // this.categoryId = data.value
+      // this.videoPageWrapper(this.categoryId, this.currentPage)
+    },
+    addDiskFile(jsonData) {
+      addDiskFile(jsonData).then(resp => {
+        if (resp.code !== 0) {
+          this.$notify({
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.uploader-example {
+  width: 500px;
+  padding: 15px;
+  margin: 40px auto 0;
+  font-size: 12px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
+}
+.uploader-example .uploader-btn {
+  margin-right: 4px;
+}
+.uploader-example .uploader-list {
+  max-height: 440px;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 320px;
+  height: 240px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 320px;
+  height: 240px;
+  display: block;
+}
+</style>

src/views/home/Image.vue

@@ -5,10 +5,14 @@
       <!--电影列表-->
       <el-col :md="24">
         <div>
-          <el-col v-for="(image, index) in dataList"
-                  :key="image.thumbnailUrl"
-                  :md="6" :sm="12" :xs="12"
-                  style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-col
+            v-for="(image, index) in dataList"
+            :key="image.thumbnailUrl"
+            :md="6"
+            :sm="12"
+            :xs="12"
+            style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px"
+          >
             <el-card :body-style="{ padding: '0px' }" class="card">
               <div class="imgs">
                 <el-image
@@ -16,13 +20,13 @@
                   fit="cover"
                   class="coverImg"
                   :src="image.thumbnailUrl"
-                  @click="showImages(index)">
-                </el-image>
+                  @click="showImages(index)"
+                />
               </div>
               <div style="padding: 14px;">
                 <span style="position: relative; bottom: 0; left: 0%; color:green">
-                  <i v-if="image.collected" class='el-icon-star-on' @click="collectItem(image)"/>
-                  <i v-else class='el-icon-star-off' @click="collectItem(image)"/>
+                  <i v-if="image.collected" class="el-icon-star-on" @click="collectItem(image)" />
+                  <i v-else class="el-icon-star-off" @click="collectItem(image)" />
                 </span>
                 <span style="position: relative; bottom: 0; left: 0; color:blue">
                   来自相册:
@@ -44,13 +48,13 @@
         -->
         <el-col :span="24" class="pagination">
           <el-pagination
-              background
-              :small="screenWidth <= 768"
-              layout="prev, pager, next"
-              :page-size="pageSize"
-              :current-page="currentPage"
-              :total="totalSize"
-              @current-change="handleCurrentChange"
+            background
+            :small="screenWidth <= 768"
+            layout="prev, pager, next"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :total="totalSize"
+            @current-change="handleCurrentChange"
           />
         </el-col>
       </el-col>
@@ -65,8 +69,8 @@
 </template>
 
 <script>
-import {getImages} from '@/api/image'
-import {collectItem} from "@/api/collect";
+import { getImages } from '@/api/image'
+import { collectItem } from '@/api/collect'
 
 export default {
   name: 'Image',
@@ -88,7 +92,7 @@ export default {
       currentPage: 1,
       pageSize: 24,
       totalSize: 0,
-      dataList: [],
+      dataList: []
     }
   },
   created() {
@@ -120,7 +124,7 @@ export default {
         } else {
           this.$notify({
             title: '获取数据失败',
-            message: res.msg,
+            message: resp.msg,
             type: 'warning',
             duration: 3000
           })
@@ -157,8 +161,8 @@ export default {
       jsonData.contentId = image.imageFileId
       if (image.collected) {
         jsonData.collected = false
-        collectItem(jsonData).then(res => {
-          if (res.code === 0) {
+        collectItem(jsonData).then(resp => {
+          if (resp.code === 0) {
             this.$notify({
               title: '取消收藏图片',
               type: 'info',
@@ -169,8 +173,8 @@ export default {
         })
       } else {
         jsonData.collected = true
-        collectItem(jsonData).then(res => {
-          if (res.code === 0) {
+        collectItem(jsonData).then(resp => {
+          if (resp.code === 0) {
             this.$notify({
               title: '图片已收藏',
               type: 'info',

src/views/login.vue

@@ -1,9 +1,7 @@
 <template>
   <el-row class="movie-list">
-    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-    </el-col>
-    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-    </el-col>
+    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
+    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
     <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; text-align: center">
         <el-card class="box-card">