vue+Element ui實現照片牆效果

<div>
  <el-upload
    :file-list="fileList"
    :headers="upload.headers"
    :action="upload.url"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" height="500px" :src="dialogImageUrl" alt="">
  </el-dialog>
</div>

<script>
import { listNetSecurityImg, delNetSecurityImg } from '@/api/websitemanage/netsecurityimg'
import { getToken } from '@/utils/auth'

export default {
  name: 'NetSecurityImg',
  components: {},
  data() {
    return {
      titleName: '圖片管理',
      form: {},
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      // 照片牆
      upload: {
        // 設定上傳的請求頭部
        headers: { token: getToken() },
        // 上傳的地址
        url: process.env.VUE_APP_BASE_API + 'netSecurityImg/importNetSecurityImg'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 網安時情圖片列表 */
    getList() {
      this.fileList = []
      listNetSecurityImg().then(response => {
        const imgList = response.data
        for (let i = 0; i < imgList.length; i++) {
          this.fileList.push({
            'uid': imgList[i].id,
            'url': imgList[i].imgUrl
          })
        }
      })
    },
    handleRemove(file, fileList) {
      const id = file.uid
      this.$confirm('是否確認刪除此圖片?', '警告', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delNetSecurityImg(id)
      }).then(response => {
        if (response.success) {
          this.getList()
          this.msgSuccess('刪除成功')
        }
      }).catch(() => {
        this.getList()
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

import request from '@/utils/request'

// 查詢圖片列表
export function listNetSecurityImg(query) {
  return request({
    url: 'netSecurityImg/getList',
    method: 'post',
    data: query
  })
}

// 刪除圖片
export function delNetSecurityImg(id) {
  return request({
    url: 'netSecurityImg/delete?id=' + id,
    method: 'post'
  })
}