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" >
 </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/deleteid=' + id,
  method: 'post'
 })
}

4.表的设计

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