vue+Element?ui實現(xiàn)照片墻效果

更新時間：2022年04月11日 08:56:27 作者：Song_Estelle

這篇文章主要為大家詳細介紹了vue+Element?ui實現(xiàn)照片墻效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+Element ui實現(xiàn)照片墻效果的具體代碼，供大家參考，具體內(nèi)容如下

上面是我要實現(xiàn)的效果。直接上代碼，簡潔明了

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: {
? ? ? ? // 設(shè)置上傳的請求頭部
? ? ? ? headers: { token: getToken() },
? ? ? ? // 上傳的地址
? ? ? ? url: process.env.VUE_APP_BASE_API + 'netSecurityImg/importNetSecurityImg'
? ? ? }
? ? }
? },
? created() {
? ? this.getList()
? },
? methods: {
? ? /** 網(wǎng)安時情圖片列表 */
? ? 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.表的設(shè)計