fix: 开始做文件上传

src/views/file/FileDetail.vue

@@ -7,15 +7,14 @@
         </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
+
     <div class="container">
-      <div class="handle-box">
-        <router-link to="/fileList">
-        <el-button type="primary" plain icon="el-icon-lx-file" >选择文件</el-button>
-        </router-link>
-        <el-button type="primary" icon="el-icon-thumb" @click="handleAnalysis">数理分析</el-button>
-        <el-button type="primary" icon="el-icon-thumb" @click="createConfig">生成配置文件</el-button>
+      <div class="handle-box" style="width:50%;">
+        <el-button plain icon="el-icon-lx-file" @click="handleFileSelect" >选择文件</el-button>
 
+        <el-button type="success" icon="el-icon-search" @click="handleAnalysis">数理分析</el-button>
 
+        <el-button type="primary" icon="el-icon-thumb" @click="createConfig">生成配置文件</el-button>
       </div>
 
       <el-table :data="tableData" border class="table" ref="fieldTable" header-cell-class-name="table-header" @selection-change="handleSelectChange">
@@ -185,6 +184,11 @@ export default {
     let analysisData=reactive([])
     const pageTotal = ref(0);
 
+    const handleFileSelect=()=>{
+      router.push('/fileList')
+    }
+
+
     // 获取表格数据
     const getData = () => {
       const route=useRoute()
@@ -361,6 +365,7 @@ export default {
       saveConfig,
       selectData,
       analysisData,
+      handleFileSelect,
       handleSelectChange,
       handleSearch,
       handlePageChange,

src/views/file/FileList.vue

@@ -85,7 +85,7 @@
 </template>
 
 <script>
-import {ref, reactive} from "vue";
+import {ref, reactive,onMounted} from "vue";
 import {deleteFile, GetAllFile} from "../../api/file";
 import {useRouter} from "vue-router";
 import {ElMessage} from "element-plus";
@@ -161,17 +161,18 @@ export default {
     const handlePicDelete = (index) => {
       console.log("handlePicDelete")
       console.log(index)
-      state.fileList.splice(index, 1);
     };
-    //获取图片详情
-    //todo:把要查看的图片id传参
+    //todo:获取图片详情,把要查看的图片id传参
     const handlePicDetail=(index)=>{
       console.log("handlePicDetail")
       console.log(index)
     }
 
     //初始化
-    getFileList(userId);
+      getFileList(userId);
+    // onMounted(() => {
+    //   getFileList(userId);
+    // })
 
     return {
       currentTab,

src/views/file/Upload.vue

@@ -5,38 +5,11 @@
                 <el-breadcrumb-item>
                     <i class="el-icon-lx-calendar"></i> 表单
                 </el-breadcrumb-item>
-                <el-breadcrumb-item>图片上传</el-breadcrumb-item>
+                <el-breadcrumb-item>文件上传</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
         <div class="container">
-            <div class="content-title">支持拖拽</div>
-            <!--<div class="plugins-tips">
-                Element UI自带上传组件。
-                访问地址：
-                <a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
-            </div>-->
-            <el-upload class="upload-demo" drag action=""
-                       accept=".jpg,.png,.csv"
-                       :limit="10"
-                       :on-exceed="handleExceed"
-                       :on-remove="handleRemove"
-                       :before-remove="beforeRemove"
-                       :auto-upload="false" multiple>
-                <i class="el-icon-upload"></i>
-                <div class="el-upload__text">
-                    将文件拖到此处，或
-                    <em>点击上传</em>
-                </div>
-                <template #tip>
-                    <div class="el-upload__tip">请上传jpg/png图像文件或csv结构化文件，且不超过 500kb,一次最多上传10个文件</div>
-                </template>
-            </el-upload>
-            <!--<div class="content-title">支持裁剪</div>
-            <div class="plugins-tips">
-                vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。
-                访问地址：
-                <a href="https://github.com/Agontuk/vue-cropperjs" target="_blank">vue-cropperjs</a>
-            </div>-->
+
         </div>
     </div>
 </template>
@@ -54,32 +27,6 @@ export default {
         VueCropper,
     },
     setup() {
-        const imgSrc = ref("");
-        const cropImg = ref(defaultSrc);
-        const dialogVisible = ref(false);
-        const cropper = ref(null);
-
-        const setImage = (e) => {
-            const file = e.target.files[0];
-            if (!file.type.includes("image/")) {
-                return;
-            }
-            const reader = new FileReader();
-            reader.onload = (event) => {
-                dialogVisible.value = true;
-                imgSrc.value = event.target.result;
-                cropper.value && cropper.value.replace(event.target.result);
-            };
-            reader.readAsDataURL(file);
-        };
-        const cropImage = () => {
-            cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
-        };
-        const cancelCrop = () => {
-            dialogVisible.value = false;
-            cropImg.value = defaultSrc;
-        };
-
         //todo:
         const handleExceed=(files,fileList)=>{
             console.log("handleExceed")
@@ -89,75 +36,15 @@ export default {
               `一次最多上传10个文件, 你一次上传了${files.length}个文件`
           )
         }
-        const handleRemove=(file,fileList)=>{
-          console.log("handleRemove")
-          console.log(file)
-          console.log(fileList)
-        }
-      const beforeRemove = (file, filelist) => {
-        return ElMessageBox.confirm(
-            `取消上传${file.name} ?`
-        ).then(
-            () => true,
-            () => false
-        )
-      }
+
         return {
-            cropper,
-            imgSrc,
-            cropImg,
-            dialogVisible,
-            setImage,
-            cropImage,
-            cancelCrop,
+
             handleExceed,
-            handleRemove,
-            beforeRemove
+
         };
     },
 };
 </script>
 
 <style scoped>
-.content-title {
-    font-weight: 400;
-    line-height: 50px;
-    margin: 10px 0;
-    font-size: 22px;
-    color: #1f2f3d;
-}
-
-.pre-img {
-    width: 100px;
-    height: 100px;
-    background: #f8f8f8;
-    border: 1px solid #eee;
-    border-radius: 5px;
-}
-.crop-demo {
-    display: flex;
-    align-items: flex-end;
-}
-.crop-demo-btn {
-    position: relative;
-    width: 100px;
-    height: 40px;
-    line-height: 40px;
-    padding: 0 20px;
-    margin-left: 30px;
-    background-color: #409eff;
-    color: #fff;
-    font-size: 14px;
-    border-radius: 4px;
-    box-sizing: border-box;
-}
-.crop-input {
-    position: absolute;
-    width: 100px;
-    height: 40px;
-    left: 0;
-    top: 0;
-    opacity: 0;
-    cursor: pointer;
-}
 </style>