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

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

    先上效果图： 

    步骤：

    首先布局html结构：

    1. <template>
    2.     <div>
    3.         <el-form :inline="true" v-loading="upLoading" element-loading-text="拼命上传中" element-loading-spinner="el-icon-loading">
    4.           <el-form-item v-for="(item,index) in homePosterList" :key="index" style="width:49%">
    5.               <el-image :src="item.src">el-image>
    6.  
    7.             <el-upload
    8.                 :action="upUrl" :limit="2"
    9.                 :show-file-list="false"
    10.                 :on-success="function (res,file) {return handleAvatarSuccess(res,file,index)}"
    11.                 :before-upload="beforeAvatarUpload" :data="{type:'2'}">
    12.                 <el-button type="success" plain>重新上传el-button>
    13.               el-upload>
    14.               
    15.             <el-button class="deletePoster" @click.prevent="removeDomain(item)">删除el-button>
    16.           el-form-item>
    17.           <el-form-item style="width:100%;">
    18.             <el-button type="primary" @click="submitForm('homePosterList')">提交el-button>
    19.             <el-button @click="addDomain">添加广告位el-button>
    20.           el-form-item>
    21.         el-form>
    22.     div>
    23. template>

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

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

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

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

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

     js模块：

    1. import { goodsSort,setUp } from "@/api/sysManager";
    2. export default {
    3.     data() {
    4.       return {
    5.         upLoading:false,
    6.         upUrl:process.env.BASE_API + '/common/upload', //图片上传地址,
    7.         homePosterId:'',
    8.         homePosterList:[]
    9.       }
    10.     },
    11.     created(){
    12.       this.getAppletHomePoster()
    13.     },
    14.     methods: {
    15.       getAppletHomePoster(){
    16.         goodsSort({"conditions":[{"type":"code","value":"ad_user_index"}]}).then(res=>{
    17.           if(res.status==200&&res.data.length>0){
    18.             this.homePosterId=res.data[0].id
    19.             var imgListArr = JSON.parse(res.data[0].value)
    20.             imgListArr.images.map(item=>{
    21.               let obj={}
    22.               obj.src=item
    23.               console.log('obj',obj)
    24.               this.homePosterList.push(obj)
    25.             })
    26.             console.log('首页广告位的数据：',this.homePosterList)
    27.           }
    28.         })
    29.       },
    30.       beforeAvatarUpload(file){//上传时
    31.         const isJPG = (file.type==='image/png' || file.type==='image/jpeg' || file.type==='image/gif')
    32.         const isLt2M = file.size / 1024 / 1024 < 2;
    33.  
    34.         if (!isJPG) {
    35.           this.$message.error('请上传jpg/png/jif格式的图片')
    36.           return
    37.         }
    38.         if (!isLt2M) {
    39.           this.$message.error('请上传小于 2MB 的图片!');
    40.           return
    41.         }
    42.         this.upLoading=true
    43.       },
    44.       handleAvatarSuccess(res, file, index){//上传成功时
    45.         console.log('上传成功res',res)
    46.         console.log('上传成功file',file)
    47.         console.log('上传成功index',index)
    48.         this.homePosterList[index].src=process.env.VUE_APP_IMG+file.response.data[0].path
    49.         this.upLoading=false
    50.       },
    51.       submitForm(formName) {//提交
    52.         var imgJoin=[]
    53.         this.homePosterList.map(item=>{
    54.           imgJoin.push(item.src)
    55.           if(item.src==""){
    56.             this.$message.error('请先完善新增广告位图片！');
    57.             return
    58.           }
    59.         })
    60.         setUp(
    61.           {"model":{
    62.             "id":this.homePosterId,
    63.             "value":JSON.stringify({"images": imgJoin})
    64.           }
    65.         }).then(res=>{
    66.             if(res.status==200){
    67.                 this.$message.success('添加成功！');
    68.                 this.homePosterList=[]
    69.                 this.getAppletHomePoster()
    70.             }
    71.         })
    72.       },
    73.       removeDomain(item) {//删除
    74.         var index = this.homePosterList.indexOf(item)
    75.         if (index !== -1) {
    76.           this.homePosterList.splice(index, 1)
    77.         }
    78.       },
    79.       addDomain() {//添加
    80.         if(this.homePosterList.length<10){
    81.           this.homePosterList.push({src:''});
    82.         }else{
    83.           this.$message.error('最多只能添加10个广告位');
    84.         }
    85.       }
    86.     }
    87.   }

    完整代码： 

    2.  
    3. <script>
    4. import { goodsSort,setUp } from "@/api/sysManager";
    5. export default {
    6.     data() {
    7.       return {
    8.         upLoading:false,
    9.         upUrl:process.env.BASE_API + '/common/upload', //图片上传地址,
    10.         homePosterId:'',
    11.         homePosterList:[]
    12.       }
    13.     },
    14.     created(){
    15.       this.getAppletHomePoster()
    16.     },
    17.     methods: {
    18.       getAppletHomePoster(){
    19.         goodsSort({"conditions":[{"type":"code","value":"ad_user_index"}]}).then(res=>{
    20.           if(res.status==200&&res.data.length>0){
    21.             this.homePosterId=res.data[0].id
    22.             var imgListArr = JSON.parse(res.data[0].value)
    23.             imgListArr.images.map(item=>{
    24.               let obj={}
    25.               obj.src=item
    26.               console.log('obj',obj)
    27.               this.homePosterList.push(obj)
    28.             })
    29.             console.log('首页广告位的数据：',this.homePosterList)
    30.           }
    31.         })
    32.       },
    33.       beforeAvatarUpload(file){//上传时
    34.         const isJPG = (file.type==='image/png' || file.type==='image/jpeg' || file.type==='image/gif')
    35.         const isLt2M = file.size / 1024 / 1024 < 2;
    36.  
    37.         if (!isJPG) {
    38.           this.$message.error('请上传jpg/png/jif格式的图片')
    39.           return
    40.         }
    41.         if (!isLt2M) {
    42.           this.$message.error('请上传小于 2MB 的图片!');
    43.           return
    44.         }
    45.         this.upLoading=true
    46.       },
    47.       handleAvatarSuccess(res, file, index){//上传成功时
    48.         console.log('上传成功res',res)
    49.         console.log('上传成功file',file)
    50.         console.log('上传成功index',index)
    51.         this.homePosterList[index].src=process.env.VUE_APP_IMG+file.response.data[0].path
    52.         this.upLoading=false
    53.       },
    54.       submitForm(formName) {//提交
    55.         var imgJoin=[]
    56.         this.homePosterList.map(item=>{
    57.           imgJoin.push(item.src)
    58.           if(item.src==""){
    59.             this.$message.error('请先完善新增广告位图片！');
    60.             return
    61.           }
    62.         })
    63.         setUp(
    64.           {"model":{
    65.             "id":this.homePosterId,
    66.             "value":JSON.stringify({"images": imgJoin})
    67.           }
    68.         }).then(res=>{
    69.             if(res.status==200){
    70.                 this.$message.success('添加成功！');
    71.                 this.homePosterList=[]
    72.                 this.getAppletHomePoster()
    73.             }
    74.         })
    75.       },
    76.       removeDomain(item) {//删除
    77.         var index = this.homePosterList.indexOf(item)
    78.         if (index !== -1) {
    79.           this.homePosterList.splice(index, 1)
    80.         }
    81.       },
    82.       addDomain() {//添加
    83.         if(this.homePosterList.length<10){
    84.           this.homePosterList.push({src:''});
    85.         }else{
    86.           this.$message.error('最多只能添加10个广告位');
    87.         }
    88.       }
    89.     }
    90.   }
    91. script>
    92.  
    93. <style scoped lang="scss">
    94.   ::v-deep .el-form-item__content{display:flex;align-items:center;}
    95.   ::v-deep .el-form-item__content .el-image{margin-right:30px;width:300px;height:140px;}
    96.   ::v-deep .deletePoster{margin-left:30px;}
    97. style>

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

  • 相关阅读:
    信通传媒携各家虚商领袖，走进九牛汇
    生成式人工智能在软件开发过程现代化中的作用
    Redis主从复制的核心原理
    机器学习（一）：概述
    Sql server 使用DBCC Shrinkfile 收缩日志文件
    微信小程序 java在线租房-房屋租赁系统springboot
    ARP欺骗攻击
    oracle提高执行更新或新增的SQL效率
    【LLM-RAG】知识库问答 | 检索 | embedding_rag embedding
    JavaScript设计模式（三） 迭代器模式 发布-订阅模式
  • 原文地址：https://blog.csdn.net/qq_17211063/article/details/127634987