lineage-vue/src/views/system/appUser/detail/profileImg.vue

<template>
    <div style="margin:10px;">

      <el-form>
        <el-col :offset="1">
        <el-form-item label-width="0px" prop="picture" style="width: 100%;">
            <el-upload ref="upload"
                action="#"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :http-request="uploadAvatar"
                :before-upload="beforeAvatarUpload"
                :file-list="fileList"
            >
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
        </el-col>

        <el-col :span="6" v-for="(item,index) in picList" :offset="1" :style="{ padding: '0px 0px 10px' }" :key="item.key">
            <div @mouseover="enter(index)" @mouseleave="leave">
                <el-card :body-style="{ padding: '0px' }" shadow="always" class="father">
                <el-image  :key="item.value" :src="item.value" :preview-src-list="[item.value]" class="image"></el-image>
                <div class="son" v-show="num==index" @click="delImg(item.key,index)">
                    <i class="el-icon-delete" style="color:#fff"></i>
                </div>
             </el-card>
            </div>
        </el-col>
      </el-form>
    </div>
</template>

<script>
import { uploadFile,allProfileImg,delProfileImg } from "@/api/system/profileImg";

export default {
  name: "ProfileImg",
  data() {
    return {
        dialogImageUrl: '',
        dialogVisible: false,
        picList: [],
        fileList: [],
        profileImg: {
            profileId: null,
            url: null
        },
        num: -1,
    };
  },
  created() {
    const pid = this.$route.query.pid;
    this.profileImg.profileId = pid;
    this.getList(pid);
  },
  methods: {
    getList(pid){ 
        allProfileImg(this.profileImg).then(res => {
            if(res.code !== 200){
                this.$message.error('获取照片列表失败')
                return
            }
            this.picList = [];
            var apiUrl = process.env.VUE_APP_BASE_API;
            var items = res.data;
            for (const i in items) {
                var url = apiUrl + items[i].url;
                this.picList.push({ key: items[i].id, value: url})
            }
            console.log( this.picList)
        })
    },
    uploadAvatar(item) {  
        const formData = new FormData()
        const pid = this.profileImg.profileId;
        formData.append('file', item.file)
        formData.append('profileId', pid)
        const uid = item.file.uid
        uploadFile(formData).then(res => {
            this.emptyUpload()
            this.getList(pid)
            // this.picList.push({ key: uid, value: res.url })
        }).catch(() => {
            this.$message.error('上传失败，请重新上传')
            this.emptyUpload()
        })
    },
    beforeAvatarUpload(file) { 
        const isJPG = file.type === 'image/jpeg';
        const isPng = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPng) {
            this.$message.error('上传图片只能是 JPG或png 格式!')
        }
        if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!')
        }
        return (isJPG || isPng) && isLt2M
    },
    handleRemove(file, fileList) {
        for (const i in this.picList) {
        if (this.picList[i].key === file.uid) {
            this.picList.splice(i, 1)
        }
        }
    },
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
    },
    /**
     * 清空上传组件
     */
    emptyUpload() {
        const mainImg = this.$refs.upload
        if (mainImg) {
            if (mainImg.length) {
                mainImg.forEach(item => {
                    item.clearFiles()
                })
            } else {
                this.$refs.upload.clearFiles()
            }
        }
    },
    enter(index){ 
        this.num = index;
    },
    leave(){ 
        this.num = -1;
    },
    delImg(_id,index){
        var listItem = this.picList;
        const imgId = _id; 
        this.$confirm('确认删除这张照片?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
            delProfileImg(imgId).then(res => {
                if(res.code === 200) {
                    listItem.splice(index,1);
                    this.picList = listItem;
                }
            })
        }).catch(function() {});
    }
  }
}
</script>


<style>
.father{
    position: relative;
}
.son{
    position: absolute;
    z-index: 999;
    width: 100%;
    background: rgba(0,0,0,0.5);
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 5px 0;
}
.disn{
    visibility: visible;
}
 .el-upload-list--picture-card .el-upload-list__item {
     height: auto;
     width: 20%;
     vertical-align: middle;
 }
 .image {
    width: 100%;
    display: block;
  }
.button {
    padding: 5px 0;
    display: flex;
    align-content: center;
    justify-items: center;
  }
  .clearfix:before, .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>