vue+Element?ui實(shí)現(xiàn)照片墻效果
更新時(shí)間：2022年04月11日 08:56:27 作者：Song_Estelle
這篇文章主要為大家詳細(xì)介紹了vue+Element?ui實(shí)現(xiàn)照片墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue+Element ui實(shí)現(xiàn)照片墻效果的具體代碼，供大家參考，具體內(nèi)容如下
上面是我要實(shí)現(xiàn)的效果。直接上代碼，簡(jiǎ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è)置上傳的請(qǐng)求頭部
? ? ? ? headers: { token: getToken() },
? ? ? ? // 上傳的地址
? ? ? ? url: process.env.VUE_APP_BASE_API + 'netSecurityImg/importNetSecurityImg'
? ? ? }
? ? }
? },
? created() {
? ? this.getList()
? },
? methods: {
? ? /** 網(wǎng)安時(shí)情圖片列表 */
? ? 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('是否確認(rèn)刪除此圖片?', '警告', {
? ? ? ? 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è)計(jì)
注意，后臺(tái)接口上傳圖片文件是上傳到文件服務(wù)器的，文件服務(wù)器返回的圖片url進(jìn)入到數(shù)據(jù)庫(kù)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中使用Element?Plus時(shí)el-icon無(wú)法顯示的問(wèn)題解決
我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認(rèn)圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用Element?Plus時(shí)el-icon無(wú)法顯示的問(wèn)題解決,需要的朋友可以參考下2022-03-03
使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果附demo
這篇文章主要介紹了使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果 demo,需要的朋友可以參考下2019-05-05
Vue實(shí)現(xiàn)tab切換的兩種方法示例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)tab切換的兩種方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
在本篇文章里小編給大家整理的是關(guān)于vue中使用rem布局代碼詳解知識(shí)點(diǎn)，需要的朋友們參考下。2019-10-10
這篇文章主要給大家介紹了關(guān)于vue3封裝放大鏡組件的相關(guān)資料,封裝之后,使用起來(lái)就更簡(jiǎn)單了,一個(gè)組件一行就可以,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
vue2中使用SSE(服務(wù)器發(fā)送事件)原因分析
SSE是圍繞只讀Comet交互推出的API或者模式,SSE 支持短輪詢、長(zhǎng)輪詢和HTTP 流,而且能在斷開(kāi)連接時(shí)自動(dòng)確定何時(shí)重新連接,本文重點(diǎn)給大家介紹2023-10-10
這篇文章主要為大家介紹了Vue響應(yīng)式系統(tǒng)的原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
這篇文章主要介紹了詳解vue+webpack+express中間件接口使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
利用Vue3+Element?Plus封裝公共表格組件(帶源碼)
最近公司項(xiàng)目中頻繁會(huì)使用到table表格,而且前端技術(shù)這一塊也用到了vue3來(lái)開(kāi)發(fā),所以基于element plus table做了一個(gè)二次封裝的組件,這篇文章主要給大家介紹了關(guān)于利用Vue3+Element?Plus封裝公共表格組件的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue視頻時(shí)間進(jìn)度條組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03