vue+ElementUI 实现管理端照片墙（或广告位）效果

场景：在管理端配置照片墙或者广告位

先上效果图： 

步骤：

首先布局html结构：

<template>
    <div>
        <el-form :inline="true" v-loading="upLoading" element-loading-text="拼命上传中" element-loading-spinner="el-icon-loading">
          <el-form-item v-for="(item,index) in homePosterList" :key="index" style="width:49%">
              <el-image :src="item.src"></el-image>

            <el-upload
                :action="upUrl" :limit="2"
                :show-file-list="false"
                :on-success="function (res,file) {return handleAvatarSuccess(res,file,index)}"
                :before-upload="beforeAvatarUpload" :data="{type:'2'}">
                <el-button type="success" plain>重新上传</el-button>
              </el-upload>
              
            <el-button class="deletePoster" @click.prevent="removeDomain(item)">删除</el-button>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button type="primary" @click="submitForm('homePosterList')">提交</el-button>
            <el-button @click="addDomain">添加广告位</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

我是放在一个表单中的，也可以单独放出来

v-loading="upLoading"  这是加了个上传图片的时候加载效果

element-loading-text="拼命上传中"  加载的文字

element-loading-spinner="el-icon-loading"  加载的图标

v-for="(item,index) in homePosterList"  先循环从接口得到的一个数组

 js模块：

import { goodsSort,setUp } from "@/api/sysManager";
export default {
    data() {
      return {
        upLoading:false,
        upUrl:process.env.BASE_API + '/common/upload', //图片上传地址,
        homePosterId:'',
        homePosterList:[]
      }
    },
    created(){
      this.getAppletHomePoster()
    },
    methods: {
      getAppletHomePoster(){
        goodsSort({"conditions":[{"type":"code","value":"ad_user_index"}]}).then(res=>{
          if(res.status==200&&res.data.length>0){
            this.homePosterId=res.data[0].id
            var imgListArr = JSON.parse(res.data[0].value)
            imgListArr.images.map(item=>{
              let obj={}
              obj.src=item
              console.log('obj',obj)
              this.homePosterList.push(obj)
            })
            console.log('首页广告位的数据：',this.homePosterList)
          }
        })
      },
      beforeAvatarUpload(file){//上传时
        const isJPG = (file.type==='image/png' || file.type==='image/jpeg' || file.type==='image/gif')
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('请上传jpg/png/jif格式的图片')
          return
        }
        if (!isLt2M) {
          this.$message.error('请上传小于 2MB 的图片!');
          return
        }
        this.upLoading=true
      },
      handleAvatarSuccess(res, file, index){//上传成功时
        console.log('上传成功res',res)
        console.log('上传成功file',file)
        console.log('上传成功index',index)
        this.homePosterList[index].src=process.env.VUE_APP_IMG+file.response.data[0].path
        this.upLoading=false
      },
      submitForm(formName) {//提交
        var imgJoin=[]
        this.homePosterList.map(item=>{
          imgJoin.push(item.src)
          if(item.src==""){
            this.$message.error('请先完善新增广告位图片！');
            return
          }
        })
        setUp(
          {"model":{
            "id":this.homePosterId,
            "value":JSON.stringify({"images": imgJoin})
          }
        }).then(res=>{
            if(res.status==200){
                this.$message.success('添加成功！');
                this.homePosterList=[]
                this.getAppletHomePoster()
            }
        })
      },
      removeDomain(item) {//删除
        var index = this.homePosterList.indexOf(item)
        if (index !== -1) {
          this.homePosterList.splice(index, 1)
        }
      },
      addDomain() {//添加
        if(this.homePosterList.length<10){
          this.homePosterList.push({src:''});
        }else{
          this.$message.error('最多只能添加10个广告位');
        }
      }
    }
  }

完整代码： 

<template>
    <div>
        <el-form :inline="true" v-loading="upLoading" element-loading-text="拼命上传中" element-loading-spinner="el-icon-loading">
          <el-form-item v-for="(item,index) in homePosterList" :key="index" style="width:49%">
              <el-image :src="item.src"></el-image>

            <el-upload
                :action="upUrl" :limit="2"
                :show-file-list="false"
                :on-success="function (res,file) {return handleAvatarSuccess(res,file,index)}"
                :before-upload="beforeAvatarUpload" :data="{type:'2'}">
                <el-button type="success" plain>重新上传</el-button>
              </el-upload>
              
            <el-button class="deletePoster" @click.prevent="removeDomain(item)">删除</el-button>
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button type="primary" @click="submitForm('homePosterList')">提交</el-button>
            <el-button @click="addDomain">添加广告位</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { goodsSort,setUp } from "@/api/sysManager";
export default {
    data() {
      return {
        upLoading:false,
        upUrl:process.env.BASE_API + '/common/upload', //图片上传地址,
        homePosterId:'',
        homePosterList:[]
      }
    },
    created(){
      this.getAppletHomePoster()
    },
    methods: {
      getAppletHomePoster(){
        goodsSort({"conditions":[{"type":"code","value":"ad_user_index"}]}).then(res=>{
          if(res.status==200&&res.data.length>0){
            this.homePosterId=res.data[0].id
            var imgListArr = JSON.parse(res.data[0].value)
            imgListArr.images.map(item=>{
              let obj={}
              obj.src=item
              console.log('obj',obj)
              this.homePosterList.push(obj)
            })
            console.log('首页广告位的数据：',this.homePosterList)
          }
        })
      },
      beforeAvatarUpload(file){//上传时
        const isJPG = (file.type==='image/png' || file.type==='image/jpeg' || file.type==='image/gif')
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('请上传jpg/png/jif格式的图片')
          return
        }
        if (!isLt2M) {
          this.$message.error('请上传小于 2MB 的图片!');
          return
        }
        this.upLoading=true
      },
      handleAvatarSuccess(res, file, index){//上传成功时
        console.log('上传成功res',res)
        console.log('上传成功file',file)
        console.log('上传成功index',index)
        this.homePosterList[index].src=process.env.VUE_APP_IMG+file.response.data[0].path
        this.upLoading=false
      },
      submitForm(formName) {//提交
        var imgJoin=[]
        this.homePosterList.map(item=>{
          imgJoin.push(item.src)
          if(item.src==""){
            this.$message.error('请先完善新增广告位图片！');
            return
          }
        })
        setUp(
          {"model":{
            "id":this.homePosterId,
            "value":JSON.stringify({"images": imgJoin})
          }
        }).then(res=>{
            if(res.status==200){
                this.$message.success('添加成功！');
                this.homePosterList=[]
                this.getAppletHomePoster()
            }
        })
      },
      removeDomain(item) {//删除
        var index = this.homePosterList.indexOf(item)
        if (index !== -1) {
          this.homePosterList.splice(index, 1)
        }
      },
      addDomain() {//添加
        if(this.homePosterList.length<10){
          this.homePosterList.push({src:''});
        }else{
          this.$message.error('最多只能添加10个广告位');
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .el-form-item__content{display:flex;align-items:center;}
  ::v-deep .el-form-item__content .el-image{margin-right:30px;width:300px;height:140px;}
  ::v-deep .deletePoster{margin-left:30px;}
</style>

以上只是写了一个小功能，很多不完善的地方，希望各位大神多多指教