diff --git a/package.json b/package.json
index 44ba843..8d06cef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ag-element-ui",
-  "version": "0.1.20", 
+  "version": "0.1.21", 
   "main": "packages/index.js",
   "scripts": {
     "dev": "vue-cli-service serve",
diff --git a/packages/agForm/src/index.vue b/packages/agForm/src/index.vue
index 20d219e..23d1d58 100644
--- a/packages/agForm/src/index.vue
+++ b/packages/agForm/src/index.vue
@@ -1,191 +1,322 @@
 <template>
     <el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
-    <ag-row>
-     <ag-col v-for="item,index in data" :key="index" :span="item.span||24">
-         <el-form-item v-bind="item" :prop="item.enName" >
-             <slot :name="item.soltName" v-if="item.soltName" :row="item"/> 
-                <div class="contentbox" v-else>
-                    <ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item"  v-if="item.type=='ag-textarea'" size="small" clearable></ag-input>
-                 <ag-input v-model="formValue[item.enName]" v-bind="item"  v-if="item.type=='ag-input'" size="small" clearable></ag-input>
-                 <ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
-                 <ag-select v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/>
-                 <el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable>
-                 <el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio> 
-                 </el-radio-group>
-                 <el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable>
-                    <el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox> 
-                  </el-checkbox-group>
-                  <el-input-number v-model="formValue[item.enName]" v-bind="item"  v-if="item.type=='ag-input-number'" clearable></el-input-number>
-                  <el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable :style="{width:'100%'}"></el-cascader>
-                  <el-switch
+      <ag-row>
+        <ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24">
+          <el-form-item v-bind="item" :prop="item.enName">
+            <slot :name="item.soltName" v-if="item.soltName" :row="item" />
+            <div class="contentbox" v-else>
+              <ag-input
                 v-model="formValue[item.enName]"
-                 v-bind="item" size="small" v-if="item.type=='ag-switch'&&formValue[item.enName]" >
-                </el-switch>
-                <el-slider v-model="formValue[item.enName]" 
-                v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
-                <el-time-select
-                 :style="{width:'100%'}"
+                type="textarea"
+                v-bind="item"
+                v-if="item.type == 'ag-textarea'"
+                size="small"
                 clearable
-                 v-model="formValue[item.enName]"
-                v-bind="item" size="small" 
-                v-if="item.type=='ag-time-select'" 
-                :picker-options="item.options">
+              ></ag-input>
+              <ag-input
+                v-model="formValue[item.enName]"
+                v-bind="item"
+                v-if="item.type == 'ag-input'"
+                size="small"
+                clearable
+              ></ag-input>
+              <ag-date-picker
+                v-bind="item"
+                v-model="formValue[item.enName]"
+                v-if="item.type == 'ag-date-picker'"
+                size="small"
+                clearable
+              />
+              <ag-select
+                v-model="formValue[item.enName]"
+                v-bind="item"
+                v-if="item.type == 'ag-select'"
+                size="small"
+                clearable
+              />
+              <el-radio-group
+                v-model="formValue[item.enName]"
+                v-bind="item"
+                v-if="item.type == 'ag-radio' && formValue[item.enName]"
+                size="small"
+                clearable
+              >
+                <el-radio
+                  :label="it.value"
+                  v-for="(it, index) in item.options"
+                  :key="index"
+                  >{{ it.label }}</el-radio
+                >
+              </el-radio-group>
+              <el-checkbox-group
+                v-bind="item"
+                v-if="item.type == 'ag-checkbox' && formValue[item.enName]"
+                v-model="formValue[item.enName]"
+                size="small"
+                clearable
+              >
+                <el-checkbox
+                  v-for="(it, index) in item.options"
+                  :label="it.value"
+                  :key="index"
+                  >{{ it.label }}</el-checkbox
+                >
+              </el-checkbox-group>
+              <el-input-number
+                v-model="formValue[item.enName]"
+                v-bind="item"
+                v-if="item.type == 'ag-input-number'"
+                clearable
+              ></el-input-number>
+              <el-cascader
+                v-model="formValue[item.enName]"
+                v-bind="item"
+                size="small"
+                v-if="item.type == 'ag-cascader'"
+                clearable
+                :style="{ width: '100%' }"
+              ></el-cascader>
+              <el-switch
+                v-model="formValue[item.enName]"
+                v-bind="item"
+                size="small"
+                v-if="item.type == 'ag-switch' && formValue[item.enName]"
+              >
+              </el-switch>
+              <el-slider
+                v-model="formValue[item.enName]"
+                v-bind="item"
+                size="small"
+                v-if="item.type == 'ag-slider'"
+              ></el-slider>
+              <el-time-select
+                :style="{ width: '100%' }"
+                clearable
+                v-model="formValue[item.enName]"
+                v-bind="item"
+                size="small"
+                v-if="item.type == 'ag-time-select'"
+                :picker-options="item.options"
+              >
               </el-time-select>
-             <ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload>
-             <el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate>
-             <agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small"> 
-             </agColorPicker>
-             <el-transfer :data="item.data"  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
-             <agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/> 
-             <ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/> 
-             <agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
-             <ag-mution-checkbox :datas="item.datas" v-bind="item"  :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
-            <ag-multion-date-picker  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/> 
+              <ag-upload
+                v-bind="item"
+                v-model="formValue[item.enName]"
+                v-if="item.type == 'ag-upload'"
+                @onError="$listeners.onError"
+                clear
+                isPre
+              ></ag-upload>
+              <el-rate
+                v-bind="item"
+                v-model="formValue[item.enName]"
+                v-if="item.type == 'ag-rate'"
+                size="small"
+              ></el-rate>
+              <agColorPicker
+                v-bind="item"
+                v-model="formValue[item.enName]"
+                v-if="item.type == 'ag-color-picker'"
+                size="small"
+              >
+              </agColorPicker>
+              <el-transfer
+                :data="item.data"
+                v-bind="item"
+                v-model="formValue[item.enName]"
+                v-if="item.type == 'ag-transfer'"
+                size="small"
+              ></el-transfer>
+              <agNumberRange
+                v-bind="item"
+                v-model="formValue[item.enName]"
+                v-if="item.type == 'ag-numberRange'"
+                size="small"
+                clearable
+              />
+              <ag-multion-input
+                v-bind="item"
+                v-model="formValue[item.enName]"
+                v-if="item.type == 'ag-multion-input'"
+                size="small"
+                clearable
+              />
+              <agQuery
+                v-bind="item"
+                v-model="formValue[item.enName]"
+                v-if="item.type == 'ag-query'"
+                size="small"
+                clearable
+              />
+              <ag-mution-checkbox
+                :datas="item.datas"
+                v-bind="item"
+                :placeholder="item.placeholder"
+                v-model="formValue[item.enName]"
+                v-if="item.type == 'ag-mution-checkbox'"
+                size="small"
+              >
+              </ag-mution-checkbox>
+              <ag-multion-date-picker
+                v-bind="item"
+                v-model="formValue[item.enName]"
+                v-if="item.type == 'ag-multion-datte-picker'"
+                size="small"
+              />
             </div>
-            </el-form-item>  
-        </ag-col>  
-    </ag-row> 
-    <div class="footerbox" v-if="$listeners.onSubmit">
+            <div v-if="item.tip" class="tipbox">
+              <slot name="tip" :row="item"> {{ item.tip }}</slot>
+            </div>
+          </el-form-item>
+        </ag-col>
+      </ag-row>
+      <div class="footerbox" v-if="$listeners.onSubmit">
         <slot name="button" :value="formValue">
-            <el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
-              {{submittitle||'提交'}}
-             </el-button>
-     </slot>
-        </div>
+          <el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
+            {{ submittitle || "提交" }}
+          </el-button>
+        </slot>
+      </div>
     </el-form>
-</template>
-<script> 
- 
-
-import agInput from './../../agInput/src/index.vue';
-import agDatePicker from './../../agDatePicker/src/index.vue';
-import agSelect from './../../agSelect/src/index.vue';
-import agRow from './../../agRow/src/index.vue';
-import agCol from './../../agCol/src/index.vue';
-import agUpload from './../../agUpload/src/index.vue';
-import agColorPicker from './../../agColorPicker/src/index.vue'; 
-import agNumberRange from './../../agNumberRange/src/index.vue';
-import agMultionInput from './../../agMultionInput/src/index.vue';
-import agQuery from './../../agQuery/src/index.vue';
-import agMultionDatePicker from '../../agMultionDatePicker';
-
-
-export default{
-    name:"agForm",
-    components:{
-        agMultionDatePicker,
-        agInput:agInput,
-        agDatePicker,
-        agSelect,
-        agRow,
-        agCol,
-        agUpload:agUpload,
-        agColorPicker,
-        agNumberRange,
-        agMultionInput,
-        agQuery
+  </template>
+  <script>
+  import agInput from "./../../agInput/src/index.vue";
+  import agDatePicker from "./../../agDatePicker/src/index.vue";
+  import agSelect from "./../../agSelect/src/index.vue";
+  import agRow from "./../../agRow/src/index.vue";
+  import agCol from "./../../agCol/src/index.vue";
+  import agUpload from "./../../agUpload/src/index.vue";
+  import agColorPicker from "./../../agColorPicker/src/index.vue";
+  import agNumberRange from "./../../agNumberRange/src/index.vue";
+  import agMultionInput from "./../../agMultionInput/src/index.vue";
+  import agQuery from "./../../agQuery/src/index.vue";
+  import agMultionDatePicker from "../../agMultionDatePicker";
+  
+  export default {
+    name: "agForm",
+    components: {
+      agMultionDatePicker,
+      agInput: agInput,
+      agDatePicker,
+      agSelect,
+      agRow,
+      agCol,
+      agUpload: agUpload,
+      agColorPicker,
+      agNumberRange,
+      agMultionInput,
+      agQuery,
     },
-    props:{
-        submittitle:{
-            type:String,
-            default:'提交'
+    props: {
+      submittitle: {
+        type: String,
+        default: "提交",
+      },
+      data: {
+        type: Array,
+        default() {
+          return [];
         },
-        data:{
-            type:Array,
-            default(){
-                return []
-            }
-        },
-        span:{
-            type:Number,
-            default:24
-        }, 
+      },
+      span: {
+        type: Number,
+        default: 24,
+      },
     },
-    data(){
-        return{
-            formValue:{
-                 
-            }
-        }
-    }, 
-    mounted(){ 
-        this.formValue=this.$attrs.value;  
-        setTimeout(()=>{
-            this.$refs.formref.clearValidate();
-        },1);
-        if(this.$refs.formref){
-            for(const key in this.$refs.formref){ 
-                if(!this[key]&&key!='value'){
-                this[key]=this.$refs.formref[key];
-                }   
-            }
-      } 
-      
+    data() {
+      return {
+        formValue: {},
+      };
     },
-    watch:{
-        value(val){
-            this.formValue = val; 
-            setTimeout(()=>{
-                this.$refs.formref.clearValidate();
-            },1);
+    mounted() {
+      this.formValue = this.$attrs.value;
+      setTimeout(() => {
+        this.$refs.formref.clearValidate();
+      }, 1);
+      if (this.$refs.formref) {
+        for (const key in this.$refs.formref) {
+          if (!this[key] && key != "value") {
+            this[key] = this.$refs.formref[key];
+          }
         }
+      }
     },
-    methods:{
-        onSubmit(){ 
-            this.$emit('onSubmit',this.formValue)
-        }
+    watch: {
+      value(val) {
+        this.formValue = val;
+        setTimeout(() => {
+          this.$refs.formref.clearValidate();
+        }, 1);
+      },
     },
-}
-</script>
-
-<style lang="scss" scoped>
-    .footerbox{
-        margin-top:12px;
-        display:flex;
-        justify-content:center;
-        .submitbtn{
-            width:200px;
-        }
+    methods: {
+      onSubmit() {
+        this.$emit("onSubmit", this.formValue);
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .footerbox {
+    margin-top: 12px;
+    display: flex;
+    justify-content: center;
+    .submitbtn {
+      width: 200px;
     }
-    .el-form--inline{ 
-        .el-form-item{ 
-            display:flex;
-        } 
-       .el-form-item__content{
-            flex:1;
-            width:100%;
-        }
-    }  
-    .contentbox{
-           width:100%;
-           display: flex;
-           align-items: stretch;  
+  }
+  .el-form--inline {
+    .el-form-item {
+      display: flex;
     }
-    .flexcenter{
+    .el-form-item__content {
+      flex: 1;
+      width: 100%;
+    }
+  }
+  .contentbox {
+    width: 100%;
+    display: flex;
+    align-items: stretch;
+  }
+  .flexcenter {
+    display: flex;
+    align-items: stretch;
+  }
+  .tipbox {
+    width: 100%;
+    color: red;
+  }
+  ::v-deep {
+    .el-form--inline {
+      .el-form-item {
         display: flex;
-        align-items: stretch;  
+      }
+      .el-form-item__content {
+        display: flex;
+        flex: 1;
+        width: 100%;
+        flex-wrap: wrap;
+        margin-left: 0;
+      }
     }
-    ::v-deep{ 
-       .el-form--inline{ 
-            .el-form-item{ 
-                display:flex;
-            } 
-            .el-form-item__content{
-                display:flex;
-                flex:1;
-                width:100%;
-                margin-left:0;
-            }
-        } 
-        .el-form-item{
-            width:100%;
-            margin-bottom: 12px; 
-        }
-        .el-form-item__content{
-            flex:1;
-            display:flex;
-            width:100%;
-            margin-left:0!important;
-        } 
+    .el-form-item {
+      width: 100%;
+      margin-bottom: 12px;
     }
-</style>
+    .el-form-item__content {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      margin-left: 0 !important;
+    }
+    .el-radio-button__inner,
+    .el-radio-group {
+      display: flex;
+      align-items: center;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/packages/agUpload/src/index.vue b/packages/agUpload/src/index.vue
index 8500109..f9c8e6d 100644
--- a/packages/agUpload/src/index.vue
+++ b/packages/agUpload/src/index.vue
@@ -1,692 +1,825 @@
 <template>
-  <div class="uploadbox"> 
-   <div class="uploadimgbox" :style="{height:width+'px'}" v-if="listType=='picture-card'"> 
-         <div v-for="img,index in imageList" :key="index" :style="{width:width+'px'}" :draggable="dragmove" class="imgitem" :class="dragmove&&dragmoveclass"  @dragstart="onDragstart" @dragenter="onDragenter" @dragover="onDragover" @dragend="onDragend" @dragleave="onMouseup" >
-           <slot name="file" :file="img">
-           <img :src="img.url" class="img" v-if="img.type.indexOf('image')>-1"/>
-           <div v-else class="filetext">
-             <div class="filetitletext">文件</div>
-            <div>{{img.name}}</div>
-           </div>
-           <div class="uploadimgmask" v-if="clear||isPrew" >
-             <i class="el-icon-search" v-if="isPrew&&img.type.indexOf('image')>-1" @click="handlePictureCardPreview(img)"></i>
-             <i class="el-icon-delete" v-if="clear" @click="handleRemove(img.raw,index)"></i>
-           </div>
-         </slot>
-         </div>  
-     <div class="uploadcontain" :style="{height:width+'px',aspectRatio:isDrap?4/3:1/1}"
-      :draggable="isDrap"  
-     @dragover.prevent  
-     @dragenter.prevent  
-     @drop="onUploadDrap" 
-     v-if="limit>imageList.length">
-       <label for="uploadinput" class="uploadlabel"  @click="onInputClick">
-         <slot>
-           <i class="el-icon-plus"></i>
-           <span class="draptiptext">{{isDrap?'拖拽上传':'上传'}}</span>
-         </slot> 
-         </label> 
-     </div>
-   </div> 
-   <div class="uploadtextbox" v-if="listType=='text'||listType=='picture'">
-     <div class="uploadtextcontain" 
-      :draggable="isDrap"  
-     @dragover.prevent  
-     @dragenter.prevent  
-     @drop="onUploadDrap" 
+  <div class="uploadbox">
+    <div
+      class="uploadimgbox"
+      :style="{ height: width + 'px' }"
+      v-if="listType == 'picture-card'"
+    >
+      <div
+        v-for="(img, index) in imageList"
+        :key="index"
+        :style="{ width: width + 'px' }"
+        :draggable="dragmove"
+        class="imgitem"
+        :class="dragmove && dragmoveclass"
+        @dragstart="onDragstart"
+        @dragenter="onDragenter"
+        @dragover="onDragover"
+        @dragend="onDragend"
+        @dragleave="onMouseup"
       >
-       <label for="uploadinput" class="uploadlabel" @click="onInputClick"  >
-         <slot>
-           <el-button type="primary" size="small"><i class="el-icon-plus"></i> {{isDrap?'拖拽上传':'上传'}}</el-button> 
-         </slot> 
-         </label> 
-     </div> 
-     <slot name="tip">
-     </slot> 
-     <ul class="uploadtextlist" :class="'upload-list--'+listType"> 
-       <li v-for="img,index in imageList" :key="index" class="uploadtextitem" >
-        <div class="ag-upload-list__item-namebox" @click="handlePictureCardPreview(img)">
-         <slot name="icon">
-         <i class="el-icon-document ag-icon-document"></i>
-       </slot>
-         <slot name="file" :file="img">
-           <img v-if="listType=='picture'" :src="img.url" class="ag-upload-list__item-thumbnail" />
-           <a class="ag-upload-list__item-name" >{{img.name}}</a>
-       </slot>
-        </div>
-        <div class="uploadrightbox">
-         <slot name="status" :file="img">
-           <span class="uploadstatusbpx"> 
-              <i v-if="img.status==='uploading'" class="el-icon-loading uploadingicon" ></i>
-             <i v-if="img.status==='success'" class="el-icon-circle-check statusicon"></i>
-             <i v-if="img.status==='failed'" class="el-icon-circle-close failedicon"></i>
-             <span v-if="img.msg" class="uploadmsg">{{img.msg}}</span> 
-           </span>
-         </slot>
-         <el-popconfirm
-             :title="`确定移除${img.name}吗？`"
-             @confirm="handleRemove(img.raw,index)"
-           >
-         <i class="el-icon-close ag-icon-close"  slot="reference"></i>
-         </el-popconfirm>
-        </div> 
-       </li> 
-     </ul>
-   </div>
-   <input type="file" style="display:none;" :multiple="limit>1&&$attrs.multiple" :accept="$attrs.accept" id="uploadinput" @change="onUpdate" ref="fileinputref"/>
-   <el-dialog :visible.sync="dialogVisible">
-   <img width="100%" :src="dialogImageUrl" alt="">
-   </el-dialog> 
+        <slot name="file" :file="img">
+          <img :src="img.url" class="img" v-if="img.type.indexOf('image') > -1" />
+          <div
+            v-if="
+              $attrs.masktext &&
+              $attrs.masktext.ai == false &&
+              $attrs.masktext.data[index]
+            "
+            class="maskbox"
+          >
+            {{ $attrs.masktext.data[index] }}
+          </div>
+          <div v-if="$attrs.masktext && $attrs.masktext.ai == true" class="maskbox">
+            {{ index + 1 }}
+          </div>
+          <div v-else class="filetext">
+            <div class="filetitletext">文件</div>
+            <div>{{ img.name }}</div>
+          </div>
+          <div class="uploadimgmask" v-if="clear || isPrew">
+            <i
+              class="el-icon-search"
+              v-if="isPrew && img.type.indexOf('image') > -1"
+              @click="handlePictureCardPreview(img)"
+            ></i>
+            <i
+              class="el-icon-delete"
+              v-if="clear"
+              @click="handleRemove(img.raw, index)"
+            ></i>
+          </div>
+        </slot>
+      </div>
+      <div
+        class="uploadcontain"
+        :style="{ height: width + 'px', aspectRatio: isDrap ? 4 / 3 : 1 / 1 }"
+        :draggable="isDrap"
+        @dragover.prevent
+        @dragenter.prevent
+        @drop="onUploadDrap"
+        v-if="limit > imageList.length"
+      >
+        <label for="uploadinput" class="uploadlabel" @click="onInputClick">
+          <slot>
+            <i
+              class="el-icon-plus"
+              :style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
+            ></i>
+            <span class="draptiptext">{{
+              isDrap ? ($attrs.uploadtext ? $attrs.uploadtext : "拖拽上传") : "上传"
+            }}</span>
+          </slot>
+        </label>
+      </div>
+    </div>
+    <div class="uploadtextbox" v-if="listType == 'text' || listType == 'picture'">
+      <div
+        class="uploadtextcontain"
+        :draggable="isDrap"
+        @dragover.prevent
+        @dragenter.prevent
+        @drop="onUploadDrap"
+      >
+        <label for="uploadinput" class="uploadlabel" @click="onInputClick">
+          <slot>
+            <el-button type="primary" size="small"
+              ><i
+                class="el-icon-plus"
+                :style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
+              ></i>
+              {{
+                isDrap ? ($attrs.uploadtext ? $attrs.uploadtext : "拖拽上传") : "上传"
+              }}</el-button
+            >
+          </slot>
+        </label>
+      </div>
+      <slot name="tip"> </slot>
+      <ul class="uploadtextlist" :class="'upload-list--' + listType">
+        <li v-for="(img, index) in imageList" :key="index" class="uploadtextitem">
+          <div
+            class="ag-upload-list__item-namebox"
+            @click="handlePictureCardPreview(img)"
+          >
+            <slot name="icon">
+              <i class="el-icon-document ag-icon-document"></i>
+            </slot>
+            <slot name="file" :file="img">
+              <img
+                v-if="listType == 'picture'"
+                :src="img.url"
+                class="ag-upload-list__item-thumbnail"
+              />
+              <a class="ag-upload-list__item-name">{{ img.name }}</a>
+            </slot>
+          </div>
+          <div class="uploadrightbox">
+            <slot name="status" :file="img">
+              <span class="uploadstatusbpx">
+                <i
+                  v-if="img.status === 'uploading'"
+                  class="el-icon-loading uploadingicon"
+                ></i>
+                <i
+                  v-if="img.status === 'success'"
+                  class="el-icon-circle-check statusicon"
+                ></i>
+                <i
+                  v-if="img.status === 'failed'"
+                  class="el-icon-circle-close failedicon"
+                ></i>
+                <span v-if="img.msg" class="uploadmsg">{{ img.msg }}</span>
+              </span>
+            </slot>
+            <el-popconfirm
+              :title="`确定移除${img.name}吗？`"
+              @confirm="handleRemove(img.raw, index)"
+            >
+              <i class="el-icon-close ag-icon-close" slot="reference"></i>
+            </el-popconfirm>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <input
+      type="file"
+      style="display: none"
+      :multiple="limit > 1 && $attrs.multiple"
+      :accept="$attrs.accept"
+      id="uploadinput"
+      @change="onUpdate"
+      ref="fileinputref"
+    />
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
   </div>
- </template>
- 
- <script>   
- export default {
-   name: "agUpload",  
-   props:{
-     isPrew:{
-       type:Boolean,
-       default:true
-     },
-     clear:{
-       type:Boolean,
-       default:true
-     },
-     width:{
-       type:Number,
-       default:80
-     },
-     dragmove:{
-       type:Boolean,
-       default:false
-     },
-     isDrap:{
-       type:Boolean,
-       default:false
-     },
-     limit:{
-       type:Number,
-       default:1
-     },
-    
-     fileList:{
-       type:Array,
-       default(){
-         return [];
-       }
-     },
-     listType:{
-       type:String,
-       default:'picture-card'
-     } 
-   },
-   model: {  
-     prop: 'fileList', // 明确指定 prop 为 'value'  
-     event: 'onUpload' // 自定义事件名，用于更新 value  
- }, 
-   mounted() {    
-       if(this.fileList.length>0){
-         let list=[];
-         this.fileList.map((h)=>{
-           if(typeof(h)=='object'){
-             list.push(h);
-           }else{
-             let imgurl=h.split("/"); 
-             let filename=imgurl[imgurl.length-1];
-             let extarr=h.split(".");
-             let extname=extarr[extarr.length-1];
-             if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
-               list.push({
-                 name:filename,
-                 url:h,
-                 type:'image/'+extname.toLowerCase(),
-                 raw:null
-               });
-             }else{
-               list.push({
-                 name:filename,
-                 url:h,
-                 type:'other/'+extname.toLowerCase(),
-                 raw:null
-               });
-             } 
-           }
-         });
-         this.imageList=list; 
-       }  
-     }, 
-   watch:{
-     fileList(val){ 
-       if(val.length>0){
-         let list=[];
-         val.map((h)=>{
-           if(typeof(h)=='object'){
-             list.push(h);
-           }else{
-             let imgurl=h.split("/"); 
-             let filename=imgurl[imgurl.length-1];
-             let extarr=h.split(".");
-             let extname=extarr[extarr.length-1];
-             if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
-               list.push({
-                 name:filename,
-                 url:h,
-                 type:'image/'+extname.toLowerCase(),
-                 raw:null
-               });
-             }else{
-               list.push({
-                 name:filename,
-                 url:h,
-                 type:'other/'+extname.toLowerCase(),
-                 raw:null
-               });
-             } 
-           }
-         });
-         this.imageList=list; 
-       }  
-     }
-   },
-   data() {
-     return {
-       dialogImageUrl: '',
-       dialogVisible: false,
-       imageList:[],
-       sourceNode:null,
-       partNode:null,
-       selectTop:false, 
-       drag:false,
-       dragmoveclass:'imghover'
-     };
-   },  
-   methods: {
-     handleRemove(file,index) {    
-         this.imageList=this.imageList.filter((item,inkey)=>{
-           return inkey !== index;
-         }); 
-         this.$emit('onRemove',file,this.imageList); 
-     },
-     handlePictureCardPreview(file) {
-        if(file.type.indexOf('image/')>-1){
-          this.dialogImageUrl = file.url;
-          this.dialogVisible = true;
-        } 
-     },
-     onUpdate(e){ 
-       if(this.limit<=this.imageList.length){
-         return;
-       }
-      try{
-       let uplist=[];  
-       let files=[...e.target.files].slice(0,this.limit-this.imageList.length);   
-      const find=files.find((f,i)=>{
-       if(this.$attrs.accept){
-           let acceptarr=this.$attrs.accept.split(",");
-           if(!acceptarr.includes(f.type)){ 
-             if(this.$listeners.onError){
-               this.$emit('onError',`其中第${i+1}张文件类型错误`);
-             } 
-             return true;
-           }
-         }
-         if(this.$attrs.maxSize){ 
-           if(f.size>this.$attrs.maxSize){
-             if(this.$listeners.onError){
-               this.$emit('onError',`其中第${i+1}张文件大小不能超过${this.$attrs.maxSize/1024/1024}M"`);
-             } 
-             return true;
-           }
-         }
-      });  
-      if(find){
-       return;
+</template>
+
+<script>
+export default {
+  name: "agUpload",
+  props: {
+    isPrew: {
+      type: Boolean,
+      default: true,
+    },
+    clear: {
+      type: Boolean,
+      default: true,
+    },
+    width: {
+      type: Number,
+      default: 80,
+    },
+    dragmove: {
+      type: Boolean,
+      default: false,
+    },
+    isDrap: {
+      type: Boolean,
+      default: false,
+    },
+    limit: {
+      type: Number,
+      default: 1,
+    },
+
+    fileList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    listType: {
+      type: String,
+      default: "picture-card",
+    },
+  },
+  model: {
+    prop: "fileList", // 明确指定 prop 为 'value'
+    event: "onUpload", // 自定义事件名，用于更新 value
+  },
+  mounted() {
+    if (this.fileList.length > 0) {
+      let list = [];
+      this.fileList.map((h) => {
+        if (typeof h == "object") {
+          list.push(h);
+        } else {
+          let imgurl = h.split("/");
+          let filename = imgurl[imgurl.length - 1];
+          let extarr = h.split(".");
+          let extname = extarr[extarr.length - 1];
+          if (["jpg", "jpeg", "png", "gif", "svg"].indexOf(extname) > -1) {
+            list.push({
+              name: filename,
+              url: h,
+              type: "image/" + extname.toLowerCase(),
+              raw: null,
+            });
+          } else {
+            list.push({
+              name: filename,
+              url: h,
+              type: "other/" + extname.toLowerCase(),
+              raw: null,
+            });
+          }
+        }
+      });
+      this.imageList = list;
+    }
+  },
+  watch: {
+    fileList(val) {
+      if (val.length > 0) {
+        let list = [];
+        val.map((h) => {
+          if (typeof h == "object") {
+            list.push(h);
+          } else {
+            let imgurl = h.split("/");
+            let filename = imgurl[imgurl.length - 1];
+            let extarr = h.split(".");
+            let extname = extarr[extarr.length - 1];
+            if (["jpg", "jpeg", "png", "gif", "svg"].indexOf(extname) > -1) {
+              list.push({
+                name: filename,
+                url: h,
+                type: "image/" + extname.toLowerCase(),
+                raw: null,
+              });
+            } else {
+              list.push({
+                name: filename,
+                url: h,
+                type: "other/" + extname.toLowerCase(),
+                raw: null,
+              });
+            }
+          }
+        });
+        this.imageList = list;
       }
-    
-       files.map((item,index) => { 
-         if(item.type.indexOf("image")>-1){
-           let filerender=new FileReader();
-           filerender.onload=function(e){  
-             uplist.push({
-               name:item.name,
-               url:e.target.result,
-               type:item.type,
-               size:item.size,
-               raw:item,
-                status:'init',
-                msg:""
-             });
-             if(files.length==uplist.length){ 
-               if(this.$listeners.onUpload){
-                 this.fileList.push(...uplist); 
-                 this.$emit('onUpload',this.fileList,uplist); 
-               }else{
-                 this.imageList.push(...uplist); 
-               } 
-             } 
-           }.bind(this);
-           filerender.readAsDataURL(item);
-         }else{
-           uplist.push({
-               name:item.name, 
-               type:item.type,
-               size:item.size,
-               raw:item,
-               status:'init',
-               msg:""
-             });
-             if(files.length==uplist.length){  
-               if(this.$listeners.onUpload){ 
-                 this.fileList.push(...uplist); 
-                 this.$emit('onUpload',this.fileList,uplist); 
-               }else{
-                 this.imageList.push(...uplist); 
-               } 
-             } 
-         } 
-       }); 
-      }catch(err){ 
-       console.log(err,"uploaderr");
-       
-       if(this.$listeners.onError){
-         this.$emit('onError',e);
-       } 
-      } 
-     }, 
-    onDragstart(e){ 
-     this.sourceNode=e.target;
-      this.partNode=e.target.parentNode;   
-     e.target.classList.add("tabsbg"); 
-     setTimeout(()=>{
-       e.target.classList.remove("tabsbg");
-       e.target.classList.add("moving");
-     },1);
-   },
-   onDragenter(e){ 
-     e.preventDefault(); 
-     if(!this.dragmove){
-       return;
-     } 
-     if(this.partNode===e.target||e.target===this.sourceNode){ 
-       return 
-     } 
-     const childrens=[...this.partNode.children];
-     let thistarget=childrens.find((f)=>f==e.target);
-     if(!thistarget){
-       thistarget=e.target.parentNode;
-     }
-     if(!thistarget){
-        return 
-     }
-    
-     const sourceIndex=childrens.indexOf(this.sourceNode);
-     const targetIndex=childrens.indexOf(thistarget); 
-    if(sourceIndex<targetIndex){ 
-     this.partNode.insertBefore(this.sourceNode,thistarget.nextElementSibling); 
-    }else{ 
-     this.partNode.insertBefore(this.sourceNode,thistarget);   
-    }  
-      
-   },
-   onDragover(e){
-    e.preventDefault();   
-   },
-   onMouseup(e){ 
-     e.preventDefault(); 
-     if(!this.dragmove){
-       return;
-     }  
-     if(this.partNode===e.target||e.target===this.sourceNode){ 
-       return 
-     } 
-     this.sourceNode.classList.remove("moving");  
-   },
-   onDragend(e){
-     e.preventDefault();  
-     if(!this.dragmove){
-       return;
-     }
-         e.target.classList.remove("moving");  
-         e.target.classList.remove("tabsbg");  
-         this.sourceNode.classList.remove("moving"); 
-         if(this.partNode===e.target||e.target===this.sourceNode){ 
-       return 
-     }
-       const childrens=[...this.partNode.children];  
-       
-       const sourceIndex=childrens.indexOf(this.sourceNode);
-         const item = this.imageList.splice(sourceIndex, 1)[0];  
-         this.imageList.splice(sourceIndex, 0, item);  
-         this.sourceNode=null;
-         this.partNode=null;   
-   },
-   onUploadDrap(e){   
-     e.preventDefault(); // 阻止默认行为（打开文件）  
-     e.stopPropagation(); // 停止事件冒泡   
-     if(this.drap){
-       return; 
-     }
-     const files = event.dataTransfer.files;   
-       this.onUpdate({target:{files: files}});
-   },
-   onInputClick(e){ 
-     e.preventDefault(); // 阻止默认行为（打开文件）  
-     e.stopPropagation(); // 停止事件冒泡   
-     this.$refs.fileinputref.click();
-   }
-   },
- };
- </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%;
-     cursor: pointer; 
-     height:100%;
-     display: flex;
-     align-items: center;
-     justify-content: center;
-     flex-direction: column;
-     .draptiptext{
-       font-size:13px;
-       color:#666;
-       text-align: center;
-       margin-top: 5px;
-     }
-   }
- }
- .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;
-     transition: all .3s;
-     &.imghover:hover{
-       cursor: move;
-     }
-     &.tabsbg{
-       border-radius:6px 6px 0 0;
-       background:#fff;
-       overflow:hidden; 
-     }
-     &.opcacityzero{
-       opacity: 0;
-     }
-     &.moving{ 
-       opacity: 0;
-       visibility: hidden; 
-     } 
+    },
+  },
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      imageList: [],
+      sourceNode: null,
+      partNode: null,
+      selectTop: false,
+      drag: false,
+      dragmoveclass: "imghover",
+    };
+  },
+  methods: {
+    handleRemove(file, index) {
+      this.imageList = this.imageList.filter((item, inkey) => {
+        return inkey !== index;
+      });
+      this.$emit("onRemove", file, this.imageList);
+    },
+    handlePictureCardPreview(file) {
+      if (file.type.indexOf("image/") > -1) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      }
+    },
+    onUpdate(e) {
+      if (this.limit <= this.imageList.length) {
+        return;
+      }
+      let that = this;
+      try {
+        let uplist = [];
+        let files = [...e.target.files].slice(0, this.limit - this.imageList.length);
+        const find = files.find((f, i) => {
+          if (this.$attrs.accept) {
+            let acceptarr = this.$attrs.accept.split(",");
+            if (!acceptarr.includes(f.type)) {
+              if (this.$listeners.onError) {
+                this.$emit("onError", `其中第${i + 1}张文件类型错误`);
+              }
+              return true;
+            }
+          }
+          if (this.$attrs.maxSize) {
+            if (f.size > this.$attrs.maxSize) {
+              if (this.$listeners.onError) {
+                this.$emit(
+                  "onError",
+                  `其中第${i + 1}张文件大小不能超过${this.$attrs.maxSize / 1024 / 1024}M"`
+                );
+              }
+              return true;
+            }
+          }
+        });
+        if (find) {
+          return;
+        }
 
-     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;
-       z-index: 1;
-       i{
-         font-size: 20px;
-         color:#fff;
-         cursor: pointer;
-       }
-     }
-     &:hover{ 
-       .uploadimgmask{
-         display: flex;
-       }
-     }
-   }
-   .filetext{
-     font-size:12px;
-     display: flex; 
-     justify-content: center;
-     flex-direction: column;
-     padding:5px;
-     box-sizing: border-box;
-     overflow: hidden;
-     height:100%;
-     white-space: nowrap; /* 文本不换行 */  
-     overflow: hidden; /* 隐藏溢出的内容 */  
-     text-overflow: ellipsis; 
-     text-align: center;
-     .filetitletext{
-       font-size:15px;
-     }
-   }
- }
-.uploadtextbox{
- .uploadtextcontain{
-   margin-bottom:7px;
-   .uploadtextcontaindefaultbtn{
-     display:flex;
-     align-items:center;
-     gap:5px;
-     background: #fff;
-     width:fit-content;
-     padding:5px 12px;
-     box-sizing: border-box;
-     border-radius:4px;
-     font-size:13px;
-   } 
- }
- .uploadtextlist{
-   display: block;
-   list-style-type: disc; 
-   margin-inline-start: 0px;
-   margin-inline-end: 0px;
-   padding-inline-start: 40px;
-   unicode-bidi: isolate;
-   margin: 0;
-   padding: 0;
-   list-style: none; 
-   margin-top:12px;
+        files.map((item, index) => {
+          if (item.type.indexOf("image") > -1) {
+            let filerender = new FileReader();
+            filerender.onload = function (e) {
+              if (that.$attrs.minWidth || that.$attrs.minHeight) {
+                let img = document.createElement("img");
+                img.src = e.target.result;
+                img.onload = () => {
+                  if (img.width < that.$attrs.minWidth) {
+                    if (this.$listeners.onError) {
+                      this.$emit(
+                        "onError",
+                        `其中第${index + 1}张图片宽度不能小于${that.$attrs.minWidth}`
+                      );
+                    }
+                    return;
+                  }
+                  if (img.height < that.$attrs.minHeight) {
+                    if (this.$listeners.onError) {
+                      this.$emit(
+                        "onError",
+                        `其中第${index + 1}张图片高度不能小于${that.$attrs.minHeight}`
+                      );
+                    }
+                    return;
+                  }
+                  uplist.push({
+                    name: item.name,
+                    url: e.target.result,
+                    type: item.type,
+                    size: item.size,
+                    raw: item,
+                    status: "init",
+                    msg: "",
+                  });
+                  if (files.length == uplist.length) {
+                    if (this.$listeners.onUpload) {
+                      this.fileList.push(...uplist);
+                      this.$emit("onUpload", this.fileList, uplist);
+                    } else {
+                      this.imageList.push(...uplist);
+                    }
+                  }
+                };
+                return;
+              }
 
-   
- } 
- .upload-list--text{
-   margin: 0;
-   padding: 0;
-   list-style: none;
-   &:first-child{
-     margin-top: 10px;
-   }
+              uplist.push({
+                name: item.name,
+                url: e.target.result,
+                type: item.type,
+                size: item.size,
+                raw: item,
+                status: "init",
+                msg: "",
+              });
+              if (files.length == uplist.length) {
+                if (this.$listeners.onUpload) {
+                  this.fileList.push(...uplist);
+                  this.$emit("onUpload", this.fileList, uplist);
+                } else {
+                  this.imageList.push(...uplist);
+                }
+              }
+            }.bind(this);
+            filerender.readAsDataURL(item);
+          } else {
+            uplist.push({
+              name: item.name,
+              type: item.type,
+              size: item.size,
+              raw: item,
+              status: "init",
+              msg: "",
+            });
+            if (files.length == uplist.length) {
+              if (this.$listeners.onUpload) {
+                this.fileList.push(...uplist);
+                this.$emit("onUpload", this.fileList, uplist);
+              } else {
+                this.imageList.push(...uplist);
+              }
+            }
+          }
+        });
+      } catch (err) {
+        console.log(err, "uploaderr");
 
-   .uploadtextitem{
-     position: relative;
-     list-style: none;
-     transition: all .5s cubic-bezier(.55,0,.1,1);
-     font-size: 14px;
-     color: #606266;
-     line-height:1;
-     margin-top: 5px;
-     position: relative;
-     display: flex;
-     padding: 5px 10px;
-     align-items: center;
-     justify-content: space-between;
-     box-sizing: border-box;
-     cursor: pointer;
-     border-radius: 4px;
-     width: 100%;
-     &:hover{
-       background-color: #f5f7fa;
-       .ag-icon-close{
-         display:inline-block;
-       }
-     } 
-   }
-   .ag-upload-list__item-namebox{
-     margin-right: 40px;
-     padding-left: 4px;
-     line-height: 1.8;
-   }
-   .ag-upload-list__item-name{
-     text-decoration: none;
-     color: #606266;
-     display: block; 
-     overflow: hidden; 
-     text-overflow: ellipsis;
-     transition: color .3s;
-     white-space: nowrap;
-     font-size: 14px; 
-   
-     .ag-icon-document{
-       height: 100%;
-       margin-right: 7px;
-       color: #909399;
-       line-height: inherit;
-       &:hover{
-         color: #409eff;
-          cursor: pointer;
-       }
-     } 
-   .el-icon-close{
-     position: relative; 
-     right: 5px;
-     cursor: pointer;
-     opacity: .75;
-     color: #606266; 
-     display:none;
-   }
- }
-   }
- .upload-list--picture{
-   margin: 0;
-   padding: 0;
-   list-style: none;
-   .uploadtextitem{
-     overflow: hidden;
-     position: relative;
-     z-index: 0;
-     background-color: #fff;
-     border: 1px solid #c0ccda;
-     border-radius: 6px;
-     box-sizing: border-box;
-     margin-top: 10px;
-     padding: 10px 10px 10px 90px;
-     height: 92px;
-     gap:10px;
-     display: flex;
-     align-items: center;
-     cursor: pointer;
-     &:hover{
-       .ag-icon-close{
-         display:inline-block;     
-       }
-     }
-     .ag-upload-list__item-thumbnail{
-       vertical-align: middle;
-       display: inline-block;
-       width: 70px;
-       height: 70px;
-       float:left;
-       position: relative;
-       z-index: 1;
-       margin-left: -80px;
-       background: #fff;
-     }
+        if (this.$listeners.onError) {
+          this.$emit("onError", e);
+        }
+      }
+    },
+    onDragstart(e) {
+      this.sourceNode = e.target;
+      this.partNode = e.target.parentNode;
+      e.target.classList.add("tabsbg");
+      setTimeout(() => {
+        e.target.classList.remove("tabsbg");
+        e.target.classList.add("moving");
+      }, 1);
+    },
+    onDragenter(e) {
+      e.preventDefault();
+      if (!this.dragmove) {
+        return;
+      }
+      if (this.partNode === e.target || e.target === this.sourceNode) {
+        return;
+      }
+      const childrens = [...this.partNode.children];
+      let thistarget = childrens.find((f) => f == e.target);
+      if (!thistarget) {
+        thistarget = e.target.parentNode;
+      }
+      if (!thistarget) {
+        return;
+      }
 
-   .ag-upload-list__item-namebox{
-     margin-right: 40px;
-     padding-left: 4px;
-     line-height: 1.8;
-   }
-     .ag-upload-list__item-name{
-       flex:1;
-       color: #606266;
-       display: block; 
-       overflow: hidden; 
-       text-overflow: ellipsis;
-       transition: color .3s;
-       white-space: nowrap;
-       line-height: 70px;
-       font-size:14px;
-       margin-top: 0;
-       text-decoration: none; 
-       .ag-icon-document{
-         display:none;
-       }
-       &:hover{
-         color: #409eff;
-          cursor: pointer;
-       } 
-     }
+      const sourceIndex = childrens.indexOf(this.sourceNode);
+      const targetIndex = childrens.indexOf(thistarget);
+      if (sourceIndex < targetIndex) {
+        this.partNode.insertBefore(this.sourceNode, thistarget.nextElementSibling);
+      } else {
+        this.partNode.insertBefore(this.sourceNode, thistarget);
+      }
+    },
+    onDragover(e) {
+      e.preventDefault();
+    },
+    onMouseup(e) {
+      e.preventDefault();
+      if (!this.dragmove) {
+        return;
+      }
+      if (this.partNode === e.target || e.target === this.sourceNode) {
+        return;
+      }
+      this.sourceNode.classList.remove("moving");
+    },
+    onDragend(e) {
+      e.preventDefault();
+      if (!this.dragmove) {
+        return;
+      }
+      e.target.classList.remove("moving");
+      e.target.classList.remove("tabsbg");
+      this.sourceNode.classList.remove("moving");
+      if (this.partNode === e.target || e.target === this.sourceNode) {
+        return;
+      }
+      const childrens = [...this.partNode.children];
 
-     .ag-icon-close{ 
-       position: absolute;
-       font-family: element-icons !important; 
-       font-style: normal;
-       font-weight: 400;
-       font-variant: normal;
-       text-transform: none;
-       line-height: 1;
-       vertical-align: baseline;
-       display: none;
-       -webkit-font-smoothing: antialiased; 
-       line-height: 1;
-       top: 5px;
-       right: 5px;
-       cursor: pointer;
-       opacity: .75;
-       color: #606266;
-     }
-   }
+      const sourceIndex = childrens.indexOf(this.sourceNode);
+      const item = this.imageList.splice(sourceIndex, 1)[0];
+      this.imageList.splice(sourceIndex, 0, item);
+      this.sourceNode = null;
+      this.partNode = null;
+    },
+    onUploadDrap(e) {
+      e.preventDefault(); // 阻止默认行为（打开文件）
+      e.stopPropagation(); // 停止事件冒泡
+      if (this.drap) {
+        return;
+      }
+      const files = event.dataTransfer.files;
+      this.onUpdate({ target: { files: files } });
+    },
+    onInputClick(e) {
+      e.preventDefault(); // 阻止默认行为（打开文件）
+      e.stopPropagation(); // 停止事件冒泡
+      this.$refs.fileinputref.click();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.uploadcontain {
+  position: relative;
+  width: 100px;
+  aspect-ratio: 1/1;
+  border-radius: 4px;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+  cursor: pointer;
+  overflow: hidden;
+  .uploadlabel {
+    font-size: 16px;
+    color: #97a8be;
+    display: block;
+    width: 100%;
+    cursor: pointer;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    .draptiptext {
+      font-size: 13px;
+      color: #666;
+      text-align: center;
+      margin-top: 5px;
+    }
   }
 }
-.uploadrightbox{
- display:flex;
- justify-content:flex-end;
- align-items: center;
- .uploadstatusbpx{
-   margin-right: 7px;
- }
+.uploadimgbox {
+  position: relative;
+  width: auto;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  .imgitem {
+    position: relative;
+    width: 100px;
+    cursor: pointer;
+    border: 1px solid #e5e5e5;
+    background: #fff;
+    border-radius: 4px;
+    overflow: hidden;
+    aspect-ratio: 1/1;
+    transition: all 0.3s;
+    .maskbox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: #1f292e 60%;
+      padding: 5px 8px;
+      border-bottom-right-radius: 6px;
+      line-height: 1;
+      color: #fff;
+      font-size: 12px;
+    }
+    &.imghover:hover {
+      cursor: move;
+    }
+    &.tabsbg {
+      border-radius: 6px 6px 0 0;
+      background: #fff;
+      overflow: hidden;
+    }
+    &.opcacityzero {
+      opacity: 0;
+    }
+    &.moving {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    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, 0.3);
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      z-index: 1;
+      i {
+        font-size: 20px;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
+    &:hover {
+      .uploadimgmask {
+        display: flex;
+      }
+    }
+  }
+  .filetext {
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    padding: 5px;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: 100%;
+    white-space: nowrap; /* 文本不换行 */
+    overflow: hidden; /* 隐藏溢出的内容 */
+    text-overflow: ellipsis;
+    text-align: center;
+    .filetitletext {
+      font-size: 15px;
+    }
+  }
 }
-.uploadingicon{
- color:#409eff;
+.uploadtextbox {
+  .uploadtextcontain {
+    margin-bottom: 7px;
+    .uploadtextcontaindefaultbtn {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      background: #fff;
+      width: fit-content;
+      padding: 5px 12px;
+      box-sizing: border-box;
+      border-radius: 4px;
+      font-size: 13px;
+    }
+  }
+  .uploadtextlist {
+    display: block;
+    list-style-type: disc;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: 40px;
+    unicode-bidi: isolate;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    margin-top: 12px;
+  }
+  .upload-list--text {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    &:first-child {
+      margin-top: 10px;
+    }
+
+    .uploadtextitem {
+      position: relative;
+      list-style: none;
+      transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+      font-size: 14px;
+      color: #606266;
+      line-height: 1;
+      margin-top: 5px;
+      position: relative;
+      display: flex;
+      padding: 5px 10px;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      cursor: pointer;
+      border-radius: 4px;
+      width: 100%;
+      &:hover {
+        background-color: #f5f7fa;
+        .ag-icon-close {
+          display: inline-block;
+        }
+      }
+    }
+    .ag-upload-list__item-namebox {
+      margin-right: 40px;
+      padding-left: 4px;
+      line-height: 1.8;
+    }
+    .ag-upload-list__item-name {
+      text-decoration: none;
+      color: #606266;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: color 0.3s;
+      white-space: nowrap;
+      font-size: 14px;
+
+      .ag-icon-document {
+        height: 100%;
+        margin-right: 7px;
+        color: #909399;
+        line-height: inherit;
+        &:hover {
+          color: #409eff;
+          cursor: pointer;
+        }
+      }
+      .el-icon-close {
+        position: relative;
+        right: 5px;
+        cursor: pointer;
+        opacity: 0.75;
+        color: #606266;
+        display: none;
+      }
+    }
+  }
+  .upload-list--picture {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    .uploadtextitem {
+      overflow: hidden;
+      position: relative;
+      z-index: 0;
+      background-color: #fff;
+      border: 1px solid #c0ccda;
+      border-radius: 6px;
+      box-sizing: border-box;
+      margin-top: 10px;
+      padding: 10px 10px 10px 90px;
+      height: 92px;
+      gap: 10px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        .ag-icon-close {
+          display: inline-block;
+        }
+      }
+      .ag-upload-list__item-thumbnail {
+        vertical-align: middle;
+        display: inline-block;
+        width: 70px;
+        height: 70px;
+        float: left;
+        position: relative;
+        z-index: 1;
+        margin-left: -80px;
+        background: #fff;
+      }
+
+      .ag-upload-list__item-namebox {
+        margin-right: 40px;
+        padding-left: 4px;
+        line-height: 1.8;
+      }
+      .ag-upload-list__item-name {
+        flex: 1;
+        color: #606266;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: color 0.3s;
+        white-space: nowrap;
+        line-height: 70px;
+        font-size: 14px;
+        margin-top: 0;
+        text-decoration: none;
+        .ag-icon-document {
+          display: none;
+        }
+        &:hover {
+          color: #409eff;
+          cursor: pointer;
+        }
+      }
+
+      .ag-icon-close {
+        position: absolute;
+        font-family: element-icons !important;
+        font-style: normal;
+        font-weight: 400;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+        vertical-align: baseline;
+        display: none;
+        -webkit-font-smoothing: antialiased;
+        line-height: 1;
+        top: 5px;
+        right: 5px;
+        cursor: pointer;
+        opacity: 0.75;
+        color: #606266;
+      }
+    }
+  }
 }
-.failedicon{
- color:red;
+.uploadrightbox {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  .uploadstatusbpx {
+    margin-right: 7px;
+  }
 }
-.statusicon{
- color:green;
+.uploadingicon {
+  color: #409eff;
 }
-.uploadmsg{
- margin:0 7px;
+.failedicon {
+  color: red;
 }
- ::v-deep {
-   .el-table {
-     width: 100%;
-   }
- }
- </style>
- 
\ No newline at end of file
+.statusicon {
+  color: green;
+}
+.uploadmsg {
+  margin: 0 7px;
+}
+::v-deep {
+  .el-table {
+    width: 100%;
+  }
+}
+</style>