vue+Element ui实现照片墙效果_vue.js_

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