fix: 重置ok

src/views/file/Upload.vue

@@ -23,8 +23,8 @@
 
           <el-form-item label="上传文件">
             <!-- accept接收文件类型,auto-upload:false 关闭自动上传,drag 允许拖动，name=file,上传文件的字段名           -->
-            <!-- file-list:接收文件上传的数组,before-upload:配合accept属性,检查文件类型、后缀           -->
-            <!-- on-change:获取文件，将文件保存在fileList里           -->
+            <!-- file-list:接收文件上传的数组,before-upload:配合accept属性,检查文件类型、后缀,before-remove：删除提醒           -->
+            <!-- on-change:获取文件，将文件保存在fileList里;limit:最多上传文件数           -->
             <el-upload
                 ref="uploadRef"
                 accept='text/csv,	application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
@@ -35,28 +35,19 @@
                 :before-upload="beforeUploadFile"
                 :before-remove="beforeRemoveFile"
                 :on-change="getFile"
+                :on-exceed="handleExceed"
+                :limit="1"
                 style="width: 500px;"
                 >
             </el-upload>
 
             <span slot="tip">{{message}}</span>
           </el-form-item>
-          <!--                <el-upload ref="upload"-->
+          <!--                          <el-upload -->
           <!--                           class="upload-demo"-->
-          <!--                           name="file"-->
-          <!--                           accept="'text/csv','application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"-->
-          <!--                           drag=true-->
           <!--                           :headers="headers"-->
           <!--                           :http-request="httpRequest"-->
-          <!--                           :before-remove="beforeRemove"-->
-          <!--                           :before-upload="beforeUploadFile"-->
-          <!--                           :on-exceed="handleExceed"-->
-          <!--                           :limit="1"-->
-          <!--                           :auto-upload=false-->
-          <!--                           :on-change="getFile"-->
           <!--                           :data="form"-->
-          <!--                           :file-list="fileList"-->
-          <!--                           style="width: 500px;">-->
           <!--                </el-upload>-->
 
 
@@ -70,7 +61,7 @@
             </el-button>
 
             <el-button
-                @click="resetForm(formRef)"
+                @click="resetForm(formRef,uploadRef)"
             >
               重置
             </el-button>
@@ -90,15 +81,15 @@ export default {
     //表单，不要和ref重名
     const form= reactive({
       fileName: '',
-    })
+    });
     //DOM元素
-    const formRef=ref('formRef')
-    const upload=ref('upload')
+    const formRef=ref('formRef');
+    const uploadRef=ref('upload');
     const message= '请上传csv/xlsx/xls格式的文件';
     //文件列表
-    let fileList= []
+    let fileList= [];
     //用于放数据  FormData类型
-    let formData= new FormData()
+    let formData= new FormData();
 
     //校验规则
     const rules = reactive({
@@ -165,9 +156,10 @@ export default {
     }
 
     //重置表单
-    function resetForm(formEl){
-      if (!formEl) return
+    function resetForm(formEl,uploadEl){
+      if (!formEl || !uploadEl) return
       formEl.resetFields()
+      uploadEl.clearFiles()
     }
 
     //判断后缀是否符合要去
@@ -212,17 +204,24 @@ export default {
       })
     }
 
+    //超限制
+    function handleExceed(files, fileList) {
+      ElMessage.warning("目前只能上传一个包")
+    }
+
     return{
       form,
       rules,
       message,
       fileList,
+      formRef,
+      uploadRef,
       submitForm,
       resetForm,
-      formRef,
       getFile,
       beforeUploadFile,
-      beforeRemoveFile
+      beforeRemoveFile,
+      handleExceed
     }
   }
 }