feat: 上传终于搞定了

src/api/file.js

@@ -1,23 +1,51 @@
-import request from '../utils/request';
 import axios from 'axios';
 import {FILE_MODULE} from "./_prefix";
+// import request from '../utils/request';
 
 /**
  *  添加文件 POST /upload
- * @param {*} payload
+ * @param {*} payload:formData,直接放Body里
  * @returns
  */
 export const UploadFile = payload => {
-    const {userId, file, fileName} = payload;
-    console.log("UploadFile")
-    console.log("payload:")
-    console.log("userId:"+userId+"\nfileName:"+fileName+"\nfile:"+file)
-    return axios.post(`${FILE_MODULE}/upload`, {
-        userId, file, fileName
+    return axios.post(`${FILE_MODULE}/upload`,
+        payload
+        ,{
+        headers:{
+            'Content-Type': "multipart/form-data;"
+            // 'Content-Type': "false",
+            // 'Process-Data': 'false',
+        }
+    }).then((res) => {
+        return res.data
+    })
+}
+/**
+ * ({
+        url: `${FILE_MODULE}/upload`,
+        method: 'post',
+        data: payload,
+        "Process-Data": false,// 告诉axios不要去处理发送的数据(重要参数)
+        "Content-Type": false,   // 告诉axios不要去设置Content-Type请求头
     }).then(res => {
-        return res.data;
+        return res.data
     });
-}
+ */
+
+
+//    return axios.post(`${FILE_MODULE}/upload`,
+//         payload,
+//  {
+//             headers:{
+//                 'Content-Type': "multipart/form-data",
+//                 // 'Content-Type': "false",
+//                 // 'Process-Data': 'false',
+//             }
+//         }
+
+ //    ).then(res => {
+ //        return res.data;
+ //    });
 
 /**
  *  获得文件列表 GET /get/all

src/views/file/Upload.vue

@@ -17,8 +17,10 @@
             label-width="120px"
         >
           <!--   文件名：       -->
-          <el-form-item label="文件名" prop="fileName"  style="width: 400px;">
-            <el-input placeholder="在此填写文件名" v-model="form.fileName"></el-input>
+          <el-form-item label="文件命令" prop="fileName"  style="width: 400px;">
+            <el-input placeholder="在此填写上传后的文件名" v-model="form.fileName">
+              <template #append>.csv</template>
+            </el-input>
           </el-form-item>
 
           <el-form-item label="上传文件">
@@ -27,7 +29,7 @@
             <!-- on-change:获取文件，将文件保存在fileList里;limit:最多上传文件数           -->
             <el-upload
                 ref="uploadRef"
-                accept='text/csv,	application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+                accept='text/csv'
                 :auto-upload=false
                 drag
                 name="file"
@@ -75,6 +77,8 @@
 <script>
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from "element-plus"
+import {UploadFile} from "../../api/file";
+
 export default {
   name: "Upload",
   setup() {
@@ -85,7 +89,7 @@ export default {
     //DOM元素
     const formRef=ref('formRef');
     const uploadRef=ref('upload');
-    const message= '请上传csv/xlsx/xls格式的文件';
+    const message= '请上传csv格式的文件';
     //文件列表
     let fileList= [];
     //用于放数据  FormData类型
@@ -100,11 +104,11 @@ export default {
               message: '文件名最多64个字符!',
               trigger:  'blur',
             },
-            {
-              required:true,
-              message: '必须填写文件名!',
-              trigger:  'blur',
-            }
+            // {
+            //   required:true,
+            //   message: '必须填写文件名!',
+            //   trigger:  'blur',
+            // }
           ]
     })
 
@@ -115,6 +119,7 @@ export default {
       fileList = files;
       console.log(file)
       console.log("file")
+      console.log(file.raw instanceof File)
       console.log(fileList)
       console.log("fileList")
     }
@@ -123,32 +128,46 @@ export default {
       if (!formEl) return
       await formEl.validate((valid, fields) => {
         if (valid) {
-          ElMessage.success('校验成功!')
           if (fileList.length <= 0) {
-            ElMessage.error("至少上传一个包！");
+            ElMessage.error("请先上传1个文件！");
             return;
           }
-          upload.submit();
+
           //将表单内其他内容添加进formData
-          formData.append('fileName', form.fileName)
+          formData.append('fileName', form.fileName+'.csv')
+          formData.append('file', fileList[0].raw);
+          console.log("fileList[0]:")
+          console.log(fileList[0])
+          console.log(fileList[0] instanceof File)
           formData.append('userId', "1")
+
           //调用接口，提交即可
+
+          console.log("formData")
+          console.log(formData.get('fileName'))
+          console.log(formData.get('file'))
+          console.log(formData.get('userId'))
+          // let formData={
+          //   userId:1,
+          //   fileName:form.fileName+'.csv',
+          //   file:fileList[0]
+          // }
+          ElMessage.success('校验成功!')
           UploadFile(formData).then(res => {
             console.log(res)
             if (res.status === 200)
             {
               // fullscreenLoading = false;
+              resetForm(formRef,uploadRef)
               ElMessage.success('上传成功');
-              formData = {}
-              fileList = []
-              resetForm(form)
             }
             else
               {
-                ElMessage.error("上传失败");
+                ElMessage.error("上传失败!失败码:"+res.status);
               }
           })
-        } else {
+        }
+        else {
           ElMessage.error('校验失败!')
           console.log(fields)
         }
@@ -164,14 +183,14 @@ export default {
 
     //判断后缀是否符合要去
     function isFileExtensionRight(extension){
-      return extension === 'csv' || extension === 'xls' || extension === 'xlsx';
+      return extension === 'csv' || extension === 'sas';
     }
 
     //上传前,配合accept属性,检查文件类型、后缀
     function beforeUploadFile(file) {
       let extension = file.name.substring(file.name.lastIndexOf('.') + 1);
       if (isFileExtensionRight(extension)) {
-        ElMessage.warning('文件类型不对,只接受csv|xls|xlsx类型的文件'); //控制文件类型
+        ElMessage.warning('文件类型不对,目前只接受csv类型的文件'); //控制文件类型
         return false
       }
     }