tnbapp/src/views/blog/BlogImage.vue

<template>
  <el-container>
    <el-header height="220">
      <h3>图片列表</h3>
      <el-row style="margin-top: 10px">
        <el-button type="success" icon="el-icon-upload" style="margin-left: 5px" @click="handleUpload">添加</el-button>
      </el-row>
    </el-header>
    <el-main>
      <el-scrollbar style="width: 100%; height: 80vh;">
        <el-row v-if="dataList.length !== 0">
          <el-col
            v-for="(album, index) in dataList"
            :key="index"
            :md="6"
            :sm="12"
            :xs="12"
            style="padding: 5px"
          >
            <el-image
              lazy
              fit="cover"
              class="coverImg"
              :src="album.url"
              @click="showImages(index)"
            />
          </el-col>
        </el-row>
      </el-scrollbar>
      <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-dialog
        title="上传图片"
        append-to-body
        :visible.sync="addDialog"
        center
      >
        <template>
          <el-upload
            class="avatar-uploader"
            :action="imgOssUrl"
            :headers="imgHeaders"
            :data="imgData"
            :with-credentials="true"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
          >
            <i class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </template>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import { getBlogImageList } from '@/api/blog'
import { getAccessToken } from '@/utils/auth'

export default {
  name: 'BlogImage',
  data() {
    return {
      imgOssUrl: '/api/file/upload',
      imgHeaders: {
        Authorization: ''
      },
      imgData: {
        channelCode: 0
      },
      queryInfo: {
        pn: 1
      },
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 12,
      totalSize: 0,
      dataList: [],
      addDialog: false
    }
  },
  created() {
    this.imgHeaders.Authorization = 'Bearer ' + getAccessToken()
    const pageNumber = this.$route.query.pn
    if (pageNumber !== undefined && pageNumber !== null) {
      this.currentPage = parseInt(pageNumber)
      this.queryInfo.pn = parseInt(pageNumber)
    }
    document.title = '图片列表'
    this.getData()
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.queryInfo.pn = pageNumber
      this.$router.push({
        path: '/bg/blog/image',
        query: this.queryInfo
      })
      this.getData()
      // 回到顶部
      scrollTo(0, 0)
    },
    getData() {
      getBlogImageList(this.queryInfo).then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          this.dataList = respData.list
          this.totalSize = respData.totalSize
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    handleUpload() {
      this.addDialog = true
    },
    // ****************************************************************************************************************
    beforeAvatarUpload(file) {
      const isJPG = file.type.startsWith('image/')
      if (!isJPG) {
        this.$message.error('只能上传图片文件')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片文件大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess(resp, file) {
      this.$message.info(resp.msg)
    },
    showImages(index) {
      const imageUrls = []
      for (const item of this.dataList) {
        imageUrls.push(item.url)
      }
      this.$viewerApi({
        images: imageUrls,
        options: {
          initialViewIndex: index,
          movable: true,
          fullscreen: false,
          keyboard: true
        }
      })
    }
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px){
  .coverImg {
    height: 120px !important;
  }
}

.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: 256px;
  height: 256px;
  line-height: 178px;
  text-align: center;
}
.coverImg {
  width: 100%;
  height: 320px;
  display: block;
}
</style>