vue+Element ui实现照片墙效果

本文实例为大家分享了vue+Element ui实现照片墙效果的具体代码，供大家参考，具体内容如下

上面是我要实现的效果。直接上代码，简洁明了

1.前端视图代码

<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>

2.前端script部分代码

<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>

3.api接口js

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'
  })
}

4.表的设计

注意，后台接口上传图片文件是上传到文件服务器的，文件服务器返回的图片url进入到数据库