创建相册，批量删除，图片预览，上传图片

本是古典何须时尚 2023-03-01 13:26 267阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1_size_16_color_FFFFFF_t_70]  
**子组件**

<template>
      <div>
        <li
          class="list-group-item list-group-item-action d-flex"
          style="cursor: pointer;"
          @click.stop="$emit('change', index)"
          :class="{ 'active sum-active': active }"
        >
          { {  item.name }}
          <el-dropdown class="ml-auto">
            <span class=" btn btn-light btn-sm border">
              { {  item.num }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.stop.native="$emit('edit', { item, index })"
                >修改</el-dropdown-item
              >
              <el-dropdown-item @click.stop.native="$emit('del', index)"
                >删除</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </div>
    </template>
    
    <script>
    export default { 
      props: { 
        active: { 
          type: Boolean,
          default: false
        },
        item: Object,
        index: Number
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .sum-active { 
      color: #67c23a !important;
      background-color: #f0f9eb !important;
      border-color: #c2e7b0 !important;
    }
    </style>

**父组件**

<template>
      <div>
        <el-container style="position:absolute;top:130px;bottom:0;left:0;right:0;">
          
          <el-header class="d-flex align-items-center border-bottom">
            <div class="d-flex mr-auto">
              <el-select placeholder="请选择图片排序方式"
                         v-model="searchForm.order"
                         size="mini"
                         style="width: 160px;"
                         class="mr-2">
                <el-option label="区域一"
                           value="shanghai"></el-option>
                <el-option label="区域二"
                           value="beijing"></el-option>
              </el-select>
              <el-input size="mini"
                        class="mr-2"
                        placeholder="请输入相册名称"
                        v-model="searchForm.keyword"
                        style="width: 150px;"></el-input>
              <el-button type="success"
                         size="mini">搜索</el-button>
            </div>
            <el-button type="danger"
                       size="mini"
                       @click="imageDelAll">批量删除</el-button>
            <el-button type="success"
                       size="mini"
                       @click="openAlbumModel(false)">创建相册</el-button>
            <el-button type="warning"
                       size="mini"
                       @click="uploadModel = true">上传图片</el-button>
          </el-header>
          
          <el-container>
            <el-aside width="200px"
                      style="position:absolute; top:60px;bottom:60px;left:0;"
                      class="bg-white border-right">
              <ul class="list-group list-group-flush">
                <album-item :item="item"
                            :index="index"
                            v-for="(item, index) in albums"
                            :key="index"
                            :active="albumIndex === index"
                            @change="albumChange"
                            @edit="openAlbumModel"
                            @del="albumDel">
                </album-item>
              </ul>
            </el-aside>
            <el-container>
              
              <el-main style="position:absolute; top:60px;bottom:60PX;left:200px;right:0;">
                <el-row :gutter="10">
                  <el-col :span="24"
                          :lg="4"
                          :md="6"
                          :sm="8"
                          v-for="(item, index) in imageList"
                          :key="index">
                    <el-card class="box-card mb-3 position-relative"
                             :body-style="{ padding: '0' }"
                             shadow="hover"
                             style="cursor:pointer;">
                      <div class="border "
                           :class="{ 'border-danger': item.ischeck }">
                        <img :src="item.url"
                             alt=""
                             class="w-100"
                             style="height:100px;"
                             @click="choose(item)" />
                        <div class="w-100 text-white px-1"
                             style="background:rgba(0,0,0,0.5);margin-top:-25px; position:absolute">
                          <span class="small">{ {  item.name }}</span>
                        </div>
                        <div class="p-2 text-center">
                          <el-button-group>
                            <el-button icon="el-icon-view"
                                       size="mini"
                                       class="p-2"
                                       @click="previewImage(item)"></el-button>
                            <el-button icon="el-icon-edit"
                                       size="mini"
                                       class="p-2"
                                       @click="ImageEdit(item, index)"></el-button>
                            <el-button icon="el-icon-delete"
                                       size="mini"
                                       class="p-2"
                                       @click="ImageDel(index)"></el-button>
                          </el-button-group>
                          <span class="badge badge-danger"
                                style="position:absolute;right:0;top:0;"
                                v-if="item.ischeck">{ {  item.checkOrder }}</span>
                          
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-main>
            </el-container>
          </el-container>
          
          <el-footer>Footer</el-footer>
        </el-container>
    
        
        <el-dialog :title="this.cred"
                   :visible.sync="albumModel">
          <el-form ref="ruleForm"
                   :model="albumForm">
            <el-form-item label="相册名称">
              <el-input v-model="albumForm.name"
                        size="medium"
                        placeholder="请输入相册名称"></el-input>
            </el-form-item>
            <el-form ref="ruleForm"
                     :model="albumForm">
              <el-form-item label="相册排序">
                <el-input-number v-model="albumForm.order"
                                 :min="0"></el-input-number>
              </el-form-item>
            </el-form>
          </el-form>
          <div slot="footer"
               class="dialog-footer">
            <el-button @click="albumModel = false">取 消</el-button>
            <el-button type="primary"
                       @click="confirmAlbumModel">确 定</el-button>
          </div>
        </el-dialog>
    
        
        <el-dialog title="上传图片"
                   :visible.sync="uploadModel">
          <div class="text-center">
            <el-upload class="upload-demo"
                       drag
                       action="https://jsonplaceholder.typicode.com/posts/"
                       multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip"
                   slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </div>
        </el-dialog>
    
        
        <el-dialog :visible.sync="previeModel"
                   width="60vw"
                   top="5vh">
          <div style="margin:-60px -20px -30px -20px">
            <img :src="previewUrl"
                 alt=""
                 class="w-100" />
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import albumItem from '@/components/isimage/album-item'
    export default { 
      data () { 
        return { 
          searchForm: { 
            order: '',
            keyword: ''
          },
          uploadModel: false, //上传图片模态框状态
          previeModel: false, //预览图片
          cred: '',
          albumIndex: 0,
          albums: [],
          albumModel: false, //打开模态框状态
          albumEditIndex: -1, //如果为-1就是修改相册
          albumForm: { 
            name: '',
            order: 0
          },
          previewUrl: '', //预览图片的路径
          imageList: [], //图片数据
          chooseList: [] //图片选中的数组
        }
      },
      components: {  albumItem },
      created () { 
        this.__init()
      },
      methods: { 
        choose (item) { 
          //之前未选中,点击之后才选中 才添加
          if (!item.ischeck) { 
            this.chooseList.push({  id: item.id, url: item.url })
            // 计算序号
            item.checkOrder = this.chooseList.length
            //修改状态
            item.ischeck = true
            return
          }
          // 取消选中
          // 找到选中数据当中的索引，删除，找不到就是没有选中
          let i = this.chooseList.findIndex(v => v.id === item.id)
          if (i === -1) return
          //  重新计算序号
          let length = this.chooseList.length
    
          // 取消选中中间部分
          if (i + 1 < length) { 
            // 重新计算选中的序号
            for (var j = i; j < length; j++) { 
              let no = this.imageList.findIndex(v => v.id === this.chooseList[j].id)
              if (no > -1) { 
                this.imageList[no].checkOrder--
              }
            }
          }
          //  找到了就删除
          this.chooseList.splice(i, 1)
          // 修改状态
          item.ischeck = false
          // 重置序号
          item.checkOrder = 0
        },
        __init () { 
          for (var i = 0; i < 20; i++) { 
            this.albums.push({ 
              name: '相册' + i,
              num: Math.floor(Math.random() * 100),
              order: 0
            })
          }
    
          for (var j = 0; j < 30; j++) { 
            this.imageList.push({ 
              url:
                'http://file02.16sucai.com/d/file/2015/0408/779334da99e40adb587d0ba715eca102.jpg',
              name: '图片' + j,
              ischeck: false,
              id: j,
              checkOrder: 0
            })
          }
        },
    
        // 切换相册
        albumChange (index) { 
          this.albumIndex = index
        },
        // 删除相册
        albumDel (index) { 
          this.$confirm('是否删除该相册?', '提示', { 
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => { 
              this.albums.splice(index, 1)
              this.$message({ 
                type: 'success',
                message: '删除成功!'
              })
            })
            .catch(() => { 
              this.$message({ 
                type: 'info',
                message: '已取消删除'
              })
            })
        },
        //打开相册 修改相册|创建相册
        openAlbumModel (obj) { 
          // 判断item是否为true 触发修改功能
          if (obj) { 
            //初始化表单
            let {  item, index } = obj
            this.albumForm.name = item.name
            this.albumForm.order = item.order
              ; (this.albumEditIndex = index), (this.cred = '修改相册')
            // 打开模态框
            return (this.albumModel = true)
          }
          // 如果为false就触发创建功能
          this.albumForm = { 
            name: '',
            order: 0
          }
          this.albumEditIndex = -1
          this.cred = '创建相册'
          this.albumModel = true
        },
        // 点击确定 修改 创建相册
        confirmAlbumModel () { 
          // 判断是否为修改
          if (this.albumEditIndex > -1) { 
            this.albumEdit()
            return (this.albumModel = false)
          }
          // 创建相册 追加albums
          this.albums.unshift({ 
            name: this.albumForm.name,
            order: this.albumForm.order,
            num: 0
          })
          this.albumModel = false
        },
        // 修改相册
        albumEdit () { 
          this.albums[this.albumEditIndex].name = this.albumForm.name
          this.albums[this.albumEditIndex].order = this.albumForm.order
        },
        // 预览图片
        previewImage (item) { 
          this.previewUrl = item.url
          this.previeModel = true
        },
        //  修改图片名称
        ImageEdit (item) { 
          this.$prompt('请输入新名称', '提示', { 
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValue: item.name,
            inputValidator (val) { 
              if (val === '') { 
                return '图片名称不能为空'
              }
            }
          }).then(({  value }) => { 
            item.name = value
            this.$message({ 
              message: '修改成功!',
              type: 'success'
            })
          })
        },
        // 删除图片
        ImageDel (index) { 
          this.$confirm('是否删除该图片?', '提示', { 
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => { 
            this.imageList.splice(index, 1)
            this.$message({ 
              message: '删除成功!',
              type: 'success'
            })
          })
        },
        //  批量删除
        imageDelAll () { 
          let list = this.imageList.filter(i => { 
            return !this.chooseList.some(c => { 
    
              return i.id === c.id
            })
          })
          this.imageList = list
          this.chooseList = []
        }
      }
    }
    </script>
    
    <style lang="scss" scoped></style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1_size_16_color_FFFFFF_t_70]: /images/20230208/23b32b80a93c4728bc73d690089980e6.png