packages/agUpload/src/index.vue

@@ -1,19 +1,18 @@
 <template>
-   <div class="uploadbox">
-        <el-upload  
-        action=""   
-        :auto-upload="false"
-        list-type="picture-card" 
-        v-bind="$attrs"
-        v-on="$listeners"
-        :on-preview="handlePictureCardPreview"
-        :on-remove="handleRemove"
-        :file-list="fileList" 
-        ref="agupdateref"
-       
-        >
-    <i class="el-icon-plus"></i>
-    </el-upload>
+   <div class="uploadbox"> 
+    <div class="uploadimgbox" :style="{height:width+'px'}">
+      <div v-for="img,index in fileList" :key="index" :style="{width:width+'px'}" class="imgitem" @dragstart="onDragstart" @dragenter="onDragenter" @dragover="onDragover" @dragend="onDragend">
+        <img :src="img.url" class="img"/>
+        <div class="uploadimgmask" v-if="clear||isPrew">
+          <i class="el-icon-search" v-if="isPrew" @click="handlePictureCardPreview(img)"></i>
+          <i class="el-icon-delete" v-if="clear" @click="handleRemove(img.raw,index)"></i>
+        </div>
+      </div> 
+      <div class="uploadcontain" :style="{width:width+'px'}">
+        <label for="uploadinput" class="uploadlabel"> <i class="el-icon-plus"></i></label>
+        <input key="" type="file" style="display:none;" :multiple="$attrs.multiple" id="uploadinput" @change="onUpdate"/>
+      </div>
+    </div> 
     <el-dialog :visible.sync="dialogVisible">
     <img width="100%" :src="dialogImageUrl" alt="">
     </el-dialog> 
@@ -24,7 +23,20 @@
 
   export default {
     name: "agUpdate", 
-    props:['style','class'],
+    props:{
+      isPrew:{
+        type:Boolean,
+        default:true
+      },
+      clear:{
+        type:Boolean,
+        default:true
+      },
+      width:{
+        type:Number,
+        default:80
+      }
+    },
     data() {
       return {
         dialogImageUrl: '',
@@ -33,25 +45,25 @@
       };
     }, 
     mounted() { 
-     let input=this.$refs.agupdateref.$vnode&&this.$refs.agupdateref.$vnode.elm.querySelector('input[type=file]');
-     if(input){
-      input.addEventListener('change',this.onUpdate);
-     }
-     
+      
      
     },
     methods: {
-      handleRemove(file, fileList) { 
-        this.fileList=fileList;
-        this.$emit('onRemove',file,this.fileList);
+      handleRemove(file,index) {    
+          this.fileList=this.fileList.filter((item,inkey)=>{
+            return inkey !== index;
+          }); 
+          this.$emit('onRemove',file,this.fileList); 
       },
       handlePictureCardPreview(file) {
         this.dialogImageUrl = file.url;
+        console.log(this.dialogImageUrl,'this.dialogImageUrl');
+        
         this.dialogVisible = true;
       },
       onUpdate(e){ 
         let uplist=[]; 
-        let files=[...e.target.files];
+        let files=[...e.target.files];  
         files.map((item,index) => {
           let filerender=new FileReader();
           filerender.onload=function(e){ 
@@ -60,7 +72,7 @@
               url:e.target.result,
               raw:item
             });
-            if(files.length-1==index){
+            if(files.length==uplist.length){ 
               this.fileList.push(...uplist); 
               this.$emit('onUpload',uplist,this.fileList); 
             } 
@@ -70,10 +82,89 @@
       
       }
     },
+    onDragstart(e){
+      e.preventDefault();
+      console.log(e,"eee");
+    },
+    onDragenter(e){
+      e.preventDefault();
+      console.log(e,"eee");
+    },
+    onDragover(e){
+      e.preventDefault();
+      console.log(e,"eee");
+    },
+    onDragend(e){
+      e.preventDefault();
+      console.log(e,"eee");
+    },
   };
   </script>
   
   <style lang="scss" scoped>
+  .uploadcontain{
+    position: relative;
+    width:100px;
+    aspect-ratio: 1/1;
+    border-radius: 4px;
+    background-color: #fff;
+    cursor: pointer;
+    overflow: hidden; 
+    .uploadlabel{
+      font-size: 16px;
+      color:#97a8be;
+      display: block;
+      width:100%;
+      height:100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .uploadimgbox{
+    position: relative;    
+    width: auto;
+    display: flex;
+    align-items: center; 
+    gap:5px;
+    .imgitem{
+      position: relative;
+      width:100px;
+      cursor: pointer; 
+      background: #fff;
+      border-radius: 4px;
+      overflow: hidden;
+      aspect-ratio: 1/1;
+      img{
+        display: block;
+        aspect-ratio: 1/1;
+        width:100%;
+      }
+      .uploadimgmask{
+        position: absolute;
+        top:0;
+        display: none;
+        left: 0;
+        width:100%;
+        height:100%;
+        background-color: rgba(0,0,0,.3); 
+        align-items: center;
+        justify-content: center;
+        gap:6px;
+        i{
+          font-size: 20px;
+          color:#fff;
+          cursor: pointer;
+        }
+      }
+      &:hover{
+        .uploadimgmask{
+          display: flex;
+        }
+      }
+    }
+  }
+
   ::v-deep {
     .el-table {
       width: 100%;

src/App.vue

@@ -47,7 +47,7 @@
         <div>{{row.date}} </div>
        </template> 
     </agTable>
-    <agUpdate @onUpload="onUpload" multiple style="width:120px">
+    <agUpdate @onUpload="onUpload" multiple >
 
     </agUpdate>
     <!-- <el-input