本篇内容主要讲解“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.表的设计
到此，相信大家对“vue+Element ui怎么实现照片墙效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
