上传处置结果处理

luobisheng

2022-11-23 f78386db30fc23cdfa77192e4d8c29aeaf8e71a9

 src/components/myUpload/index.vue

@@ -1,5 +1,11 @@
<template>
    <div class="my-upload">
      <div v-if="pictureList.length > 0" class="image-box">
        <div v-for="image in pictureList" class="image-box-item">
          <i @click="handleDeletePicture(image)" class="el-icon-delete image-delete-icon"></i>
          <el-image :key="image" class="image-content" :src="image" ></el-image>
        </div>
      </div>
        <el-upload
        :file-list="fileList" 
        action="/sccg/file/medias"
@@ -26,7 +32,7 @@
            // 文件列表
            fileList: [],
            // 是否显示文件列表
            flag: true,
            flag: false,
            // 多选
            multiple: false,
            // 限制
@@ -80,6 +86,10 @@
        // 移除文件
        handleRemove(file, fileList){
            this.$emit('delPictureUrl',{url:file.response.data.url1});
        },

        handleDeletePicture(imageUrl) {
          this.$emit('delPictureUrl', { url: imageUrl });
        }
    },
    props: {
@@ -101,19 +111,11 @@
</script>
<style lang="scss" scoped>
.my-upload {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-right: 5px;

    :deep(.el-upload--picture-card) {
        width: 100px;
        height: 100px;
    }
    :deep(.el-upload-list__item){
        width: 100px;
        height: 100px;
    }
  //.file-list {
  //  display: flex;
  //  flex-wrap: nowrap;
  //}
    .upload-btn {
        display: flex;
        flex-direction: column;
@@ -136,10 +138,39 @@
            line-height: 22px;
        }
    }
    .uploaded-image {
      width: 0;
      height: 100px;
  .image-box {
      display: flex;
    height: 100px;
    margin: 0 10px;

    .image-content {
      width: 100px;
      height: 100px;
    }
    .image-delete-icon {
      position: relative;
      bottom: calc(100% - 50px);
      left: calc(100% - 50px);
      opacity: 0;
    }

    .image-box-item:hover {
      color: #ffffff;
      opacity: .5;
      .image-delete-icon {
        z-index: 2;
        opacity: 1;
      }
    }
  }

    :deep(.el-upload--picture-card) {
        width: 100px;
        height: 100px;
    }
    :deep(.el-upload-list__item){
        width: 100px;
        height: 100px;
    }
}
</style>