fix: el-upload上传基本ok

src/views/file/Upload.vue

@@ -16,10 +16,49 @@
             ref="formRef"
             label-width="120px"
         >
+          <!--   文件名：       -->
           <el-form-item label="文件名" prop="fileName"  style="width: 400px;">
             <el-input placeholder="在此填写文件名" v-model="form.fileName"></el-input>
           </el-form-item>
 
+          <el-form-item label="上传文件">
+            <!-- accept接收文件类型,auto-upload:false 关闭自动上传,drag 允许拖动，name=file,上传文件的字段名           -->
+            <!-- file-list:接收文件上传的数组,before-upload:配合accept属性,检查文件类型、后缀           -->
+            <el-upload
+                ref="uploadRef"
+                accept='text/csv,	application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+                :auto-upload=false
+                drag
+                name="file"
+                :file-list="fileList"
+                :before-upload="beforeUploadFile"
+                @change="logFileList"
+                style="width: 500px;"
+                >
+            </el-upload>
+
+            <span slot="tip">{{message}}</span>
+          </el-form-item>
+          <!--                <el-upload ref="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>-->
+
+
+          <!--    操作：      -->
           <el-form-item>
             <el-button
                 type="primary"
@@ -59,6 +98,31 @@ export default {
     //用于放数据  FormData类型
     let formData= {}
 
+    //校验规则
+    const rules = reactive({
+      fileName:
+          [
+            {
+              max:64,
+              message: '文件名最多64个字符!',
+              trigger:  'blur',
+            },
+            {
+              required:true,
+              message: '必须填写文件名!',
+              trigger:  'blur',
+            }
+          ]
+    })
+
+    //————————————————————————————————方法区——————————————————————————————————————————————
+
+    //测试用方法
+    function logFileList() {
+      console.log(fileList)
+    }
+
+    //提交表单
     const submitForm = async (formEl) => {
       if (!formEl) return
       await formEl.validate((valid, fields) => {
@@ -95,27 +159,23 @@ export default {
       })
     }
 
+    //重置表单
     function resetForm(formEl){
       if (!formEl) return
       formEl.resetFields()
     }
 
-    //校验规则
-    const rules = reactive({
-      fileName:
-          [
-            {
-              max:64,
-              message: '文件名最多64个字符!',
-              trigger:  'blur',
-            },
-            {
-              required:true,
-              message: '必须填写文件名!',
-              trigger:  'blur',
-            }
-          ]
-    })
+    //上传前,配合accept属性,检查文件类型、后缀
+    function beforeUploadFile(file) {
+      let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
+      console.log(extension);
+      if (extension !== 'csv' && extension !== 'xls' && extension !== 'xlsx') {
+        ElMessage.warning('文件类型不对,只接受csv|xls|xlsx类型的文件'); //控制文件类型
+        return false
+      }
+    }
+
+
     return{
       form,
       rules,
@@ -123,7 +183,9 @@ export default {
       fileList,
       submitForm,
       resetForm,
-      formRef
+      formRef,
+      logFileList,
+      beforeUploadFile
     }
   }
 }