packages/agUpload/src/index.vue

@@ -1,22 +1,22 @@
 <template>
-   <div>
-        <el-upload 
-        action=""
+   <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"
-        @change="onUpdate"
+        :file-list="fileList" 
         ref="agupdateref"
+       
         >
     <i class="el-icon-plus"></i>
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
     <img width="100%" :src="dialogImageUrl" alt="">
-    </el-dialog>
-
+    </el-dialog> 
    </div>
   </template>
   
@@ -24,6 +24,7 @@
 
   export default {
     name: "agUpdate", 
+    props:['style','class'],
     data() {
       return {
         dialogImageUrl: '',
@@ -31,24 +32,42 @@
         fileList:[]
       };
     }, 
-    mounted() {
-        console.log(this.$refs.agupdateref,'this.$refs.agupdateref');
-        
-     let input=this.$refs.agupdateref.vnode;
-     console.log(input,'input');
+    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) {
-        console.log(file, fileList);
+      handleRemove(file, fileList) { 
+        this.fileList=fileList;
+        this.$emit('onRemove',file,this.fileList);
       },
       handlePictureCardPreview(file) {
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
       },
-      onUpdate(e){
-        console.log(e,"ee");
-        
+      onUpdate(e){ 
+        let uplist=[]; 
+        let files=[...e.target.files];
+        files.map((item,index) => {
+          let filerender=new FileReader();
+          filerender.onload=function(e){ 
+            uplist.push({
+              name:item.name,
+              url:e.target.result,
+              raw:item
+            });
+            if(files.length-1==index){
+              this.fileList.push(...uplist); 
+              this.$emit('onUpload',uplist,this.fileList); 
+            } 
+          }.bind(this);
+          filerender.readAsDataURL(item);
+        }); 
+      
       }
     },
   };

src/App.vue

@@ -47,7 +47,7 @@
         <div>{{row.date}} </div>
        </template> 
     </agTable>
-    <agUpdate>
+    <agUpdate @onUpload="onUpload" multiple style="width:120px">
 
     </agUpdate>
     <!-- <el-input
@@ -370,6 +370,9 @@ export default {
      this.$refs.aginputref.value=123;
   },
   methods: {
+    onUpload(files,filelist){
+      console.log("onblur",files,filelist);
+    },
     onblur(val,elem){
       console.log("onblur",val,elem,this);