fix: el-upload移除文件的提醒

src/views/file/Upload.vue

@@ -24,6 +24,7 @@
           <el-form-item label="上传文件">
             <!-- accept接收文件类型,auto-upload:false 关闭自动上传,drag 允许拖动，name=file,上传文件的字段名           -->
             <!-- file-list:接收文件上传的数组,before-upload:配合accept属性,检查文件类型、后缀           -->
+            <!-- on-change:获取文件，将文件保存在fileList里           -->
             <el-upload
                 ref="uploadRef"
                 accept='text/csv,	application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
@@ -32,7 +33,8 @@
                 name="file"
                 :file-list="fileList"
                 :before-upload="beforeUploadFile"
-                @change="logFileList"
+                :before-remove="beforeRemoveFile"
+                :on-change="getFile"
                 style="width: 500px;"
                 >
             </el-upload>
@@ -50,7 +52,7 @@
           <!--                           :before-upload="beforeUploadFile"-->
           <!--                           :on-exceed="handleExceed"-->
           <!--                           :limit="1"-->
-          <!--                           :auto-upload="false"-->
+          <!--                           :auto-upload=false-->
           <!--                           :on-change="getFile"-->
           <!--                           :data="form"-->
           <!--                           :file-list="fileList"-->
@@ -96,7 +98,7 @@ export default {
     //文件列表
     let fileList= []
     //用于放数据  FormData类型
-    let formData= {}
+    let formData= new FormData()
 
     //校验规则
     const rules = reactive({
@@ -117,11 +119,14 @@ export default {
 
     //————————————————————————————————方法区——————————————————————————————————————————————
 
-    //测试用方法
-    function logFileList() {
+    //文件上传后，保存在数组fileList里
+    function getFile(file, files) {
+      fileList = files;
+      console.log(file)
+      console.log("file")
       console.log(fileList)
+      console.log("fileList")
     }
-
     //提交表单
     const submitForm = async (formEl) => {
       if (!formEl) return
@@ -165,16 +170,47 @@ export default {
       formEl.resetFields()
     }
 
+    //判断后缀是否符合要去
+    function isFileExtensionRight(extension){
+      return extension === 'csv' || extension === 'xls' || extension === 'xlsx';
+    }
+
     //上传前,配合accept属性,检查文件类型、后缀
     function beforeUploadFile(file) {
       let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
-      console.log(extension);
-      if (extension !== 'csv' && extension !== 'xls' && extension !== 'xlsx') {
+      if (isFileExtensionRight(extension)) {
         ElMessage.warning('文件类型不对,只接受csv|xls|xlsx类型的文件'); //控制文件类型
         return false
       }
     }
 
+    //移除文件时的提醒
+    function beforeRemoveFile(file) {
+      let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
+      if (!isFileExtensionRight(extension)) return;
+
+      return ElMessageBox({
+        title: '移除待上传文件?',
+        message: `确定要删除文件: ${file.name} 吗?`,
+        showCancelButton: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true
+            instance.confirmButtonText = 'Loading...'
+            setTimeout(() => {
+              done()
+              setTimeout(() => {
+                instance.confirmButtonLoading = false
+              }, 125)
+            }, 125)
+          } else {
+            done()
+          }
+        },
+      })
+    }
 
     return{
       form,
@@ -184,8 +220,9 @@ export default {
       submitForm,
       resetForm,
       formRef,
-      logFileList,
-      beforeUploadFile
+      getFile,
+      beforeUploadFile,
+      beforeRemoveFile
     }
   }
 }