xiaoshi_system/src/utils/model/upload/index.vue

<template>
  <div class="myUpload">
    <div class="myUpload1">
      <div class="myDemo">
        <el-upload
          class="upload-demo"
          :drag="drag"
          :action="action"
          :multiple="multiple"
          :data="data"
          :name="name"
          :show-file-list="showFileList"
          :accept="accept"
          :list-type="listType"
          :auto-upload="autoUpload"
          :disabled="disabled"
          :limit="limit"
          :on-preview="onPreview"
          :on-remove="onRemove"
          :on-success="onSuccess"
          :on-error="onError"
          :on-progress="onProgress"
          :on-change="onChange"
          :on-exceed="onExceed"
          style="width: 100%"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <div class="line" v-if="fileList.length>0"></div>
      <div class="fileList" v-if="fileList.length>0">
        <ul>
          <li v-for="item in fileList" :key="item.id">
            <div><i class="el-icon-document" style="margin-right:10px"></i><span class="name" @click="checkFiles(item)">{{ item.name }}</span></div>
            <div class="type">{{ item.id?'已上传':'待上传' }}</div>
            <div class="icon" @click="onRemove(item,fileList)"><i class="el-icon-close"></i></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    action:{
        type:String,
        default:''
    },
    multiple:{
        type:Boolean
    },
    data:{
        type:Object
    },
    name:{
        type:String,
        default:''
    },
    showFileList:{
        type:Boolean
    },
    drag:{
        type:Boolean,
        default:true
    },
    accept:{
        type:String,
        default:''
    },
    listType:{
        type:String,
        default:'text'
    },
    autoUpload:{
        type:Boolean,
        default:true
    },
    fileList:{
        type:Array,
        default:()=>{
            return []
        }
    },
    disabled:{
        type:Boolean,
        default:false
    },
    limit:{
        type:Number,
    }
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    onPreview(file){
        this.$emit('on-preview',file)
    },
    onRemove(){
        this.$emit('on-preview',file,fileList)
    },
    onSuccess(response,file,fileList){
        this.$emit('on-preview',response,file,fileList)
    },
    onError(err,file,fileList){
        this.$emit('on-preview',err,file,fileList)
    },
    onProgress(event,file,fileList){
        this.$emit('on-preview',event,file,fileList)
    },
    onChange(file,fileList){
        console.log(file)
        this.$emit('on-preview',file,fileList)
    },
    onExceed(file,fileList){
        this.$emit('on-preview',file,fileList)
    },
    //查看图片
    checkFiles(file){

    }
  },
};
</script>
<style lang="scss">
.myUpload1 {
  .el-upload {
    width: 100%;
    height: 100%;
    .el-upload-dragger {
      width: 100% !important;
      height: 100%;
      border: none;
      border-radius: 0px;
    }
    .el-upload-dragger:hover {
      border: none;
    }
  }
  .el-upload-list {
    display: none;
  }
}
</style>
<style lang="scss" scoped>
.myUpload{
    width: calc(100% - 0px);
    height: 100%;
    padding: 5px;
}
.myUpload1 {
    width: calc(100% - 20px);
    height: 100%;
  padding: 5px;
  display: flex;
  align-items: center;
  background: white;
  border: 1px dashed var(--bg);
  border-radius: 10px;
  .myDemo {
    width: 100%;
    height: 100%;
    flex: 1;
  }
  .line {
    width: 1px;
    height: 100%;
    background: var(--bg);
  }
  .fileList {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    flex: 2;
    ul {
      list-style-type: none;
      padding: 0 10px;
      li{
        padding:5px 10px;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        .type{
            display: block;
            color: #57a5f7;
        }
        .icon{
            display: none;
        }
      }
      li:hover{
        background: #f4f4f4;
        .name{
           color: #57a5f7; 
           cursor: pointer;
        }
        .type{
            display: none;
        }
        .icon{
            display: block;
            cursor: pointer;
        }
      }
    }
  }
}
</style>