vue+Element ui实现照片墙效果
作者:Song_Estelle
这篇文章主要为大家详细介绍了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进入到数据库
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。