文件上传

src/layout/components/DefaultPage/DefaultPage.vue

@@ -9,15 +9,36 @@
     </div>
     <div class="btmBox">
       <div class="upFile">
-        <img
+        <!-- <img
           src="@/assets/images/newIndex/upFolderLogo.png"
           class="upImg"
           alt=""
         />
-        <span class="text1">上传你的文件</span>
+        <span class="text1">上传你的文件</span> -->
+        <el-upload
+          class="upload-demo"
+          :file-list="fileArr"
+          :limit="10"
+          :on-change="upBefore"
+          :show-file-list="false"
+          drag
+          :http-request="onSuccess"
+          multiple
+          element-loading-text="上传中..."
+          element-loading-background="rgba(255, 255, 255, 0.8)"
+          v-loading="loadingUpload"
+        >
+          <img
+            src="@/assets/images/newIndex/upFolderLogo.png"
+            class="upImg"
+            alt=""
+          />
+          <span class="text1">上传你的文件</span>
+        </el-upload>
         <p class="text2">将文件拖到此处或 <span>选择文件</span></p>
         <div class="line"></div>
         <img src="@/assets/images/newIndex/scan.png" class="scanImg" alt="" />
+        <div class="text3">扫描文件</div>
       </div>
       <div class="recent">
         <div class="top">
@@ -66,12 +87,25 @@ import { getInfo, getInfoByDirId } from "@/api/biz/info";
 import { listRecent, getRecent } from "@/api/biz/recent";
 import { setIcon, canPreviewFile } from "@/utils/index.js";
 import { preview } from "@/api/common/common.js";
-import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
+import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
+import ImgPreview from "@/components/ImgPreview/ImgPreview.vue";
+import { getConfigKey } from "@/api/system/config.js";
+import myfile from "@/api/myfile/myfile";
+import documents from '@/api/document/document'
+import uploadApi from '@/api/upload/upload'
 const tableFileData = ref([]);
 const copyFileType = ref();
 const previewData = ref();
 const loadingPreview = ref(false);
 const showPreview = ref(false);
+let fileArr = ref([]);
+const useSpace = ref();
+let fileBig = ref(0);
+const allSpace = ref();
+const maxFileSize = ref(); //能上传的最大size
+const loadingUpload = ref(false);
+const topDirId = ref();//我的文件顶层的目录id
+const topSpaceId = ref();//我的文件顶层的目录id
 const emit = defineEmits(["openMaxmin"]);
 // 获取数据
 const getList = async () => {
@@ -87,12 +121,16 @@ const getList = async () => {
 // 打开最近文件
 const toFile = async (row) => {
   copyFileType.value = row.fileType;
-   console.log("row", row);
+  console.log("row", row);
   loadingPreview.value = true;
   const filePreview = canPreviewFile(row.fileType);
   if (filePreview) {
     loadingPreview.value = false;
-    emit('openMaxmin',row.fileName,`${window.location.origin}/fileEdit?clickRowId=${row.docId}&canEdit=0&canCopy=0&history=0&fileId=0`)
+    emit(
+      "openMaxmin",
+      row.fileName,
+      `${window.location.origin}/fileEdit?clickRowId=${row.docId}&canEdit=0&canCopy=0&history=0&fileId=0`
+    );
   } else {
     const res = await preview(row.docId);
     showPreview.value = true;
@@ -109,8 +147,102 @@ const closeImgPreview = () => {
   // console.log('close');
   showPreview.value = false;
 };
+// 限制上传文件大小
+const upBefore = (file, files) => {
+  const maxSize = (maxFileSize.value - 0) * 1024 * 1024;
+  // console.log('maxSize',maxSize);
+  if (file.size > maxSize) {
+    files.pop();
+    ElMessage({
+      message:
+        file.name + "上传失败，上传文件大小最大为" + maxFileSize.value + "M",
+      type: "error",
+    });
+  } else {
+    fileBig.value = file.size + fileBig.value;
+    // fileArr.value.push(file.raw)
+  }
+  // console.log('filesend',files);
+};
+// 我的文件的空间信息
+function getSpaceList() {
+  myfile.fileType(3).then((res) => {
+    useSpace.value = res.data.usedCap;
+    allSpace.value = res.data.spaceCap;
+  });
+}
+//获取我的文件顶层的目录id
+const getDirId = ()=>{
+  documents.getTop(3).then(res => {
+    topDirId.value = res.dirId
+    topSpaceId.value = res.spaceId
+  })
+}
+function onSuccess(files, val) {
+  // console.log('suFiles',files);
+  const maxSize = (maxFileSize.value - 0) * 1024 * 1024;
+  if (files.file.size < maxSize) {
+    fileArr.value.push(files.file);
+  }
+  sureUpload()
+}
+// 确认上传
+function sureUpload() {
+  loadingUpload.value = true;
+  if (
+    useSpace.value * 1024 * 1024 + fileBig.value / 1024 >
+    allSpace.value * 1024 * 1024
+  ) {
+    ElMessage({
+      message: "超过最大容量，请联系管理员扩容",
+      type: "error",
+    });
+    loadingUpload.value = false;
+    return;
+  } else {
+    if (fileArr.value.length > 0) {
+      // console.log('fileArr',fileArr.value);
+      let form = new FormData();
+      for (var i = 0; i < fileArr.value.length; i++) {
+        form.append("files", fileArr.value[i]);
+      }
+      form.append("spaceId", topSpaceId.value);
+      form.append("dirId", topDirId.value);
+      // console.error(fileArr.value);
+      uploadApi
+        .uploadFileMany(form)
+        .then((res) => {
+          if (res.code === 200) {
+            ElMessage({
+              message: "上传文件成功",
+              type: "success",
+            });
+            // getAllTop()
+            refreshFile();
+            uploadModal.value = false;
+            loadingUpload.value = false;
+            fileArr.value = [];
+            fileBig.value = 0;
+          }
+        })
+        .catch((err) => {
+          loadingUpload.value = false;
+          fileArr.value = [];
+        });
+    } else {
+      loadingUpload.value = false;
+      return ElMessage({ message: "请选择文件", type: "error" });
+    }
+  }
+}
 onMounted(() => {
   getList();
+  getSpaceList();
+  getDirId()
+  getConfigKey("file.size.limit").then((response) => {
+    // console.log('response',response);
+    maxFileSize.value = response.msg;
+  });
 });
 </script>
 
@@ -189,6 +321,12 @@ onMounted(() => {
         text-decoration-line: underline;
       }
     }
+    .text3 {
+      font-weight: 400;
+      font-size: 14px;
+      color: #7c808d;
+      margin-top: 8px;
+    }
     .line {
       margin-top: 16px;
       width: 124px;
@@ -275,4 +413,9 @@ onMounted(() => {
     }
   }
 }
+::v-deep .el-upload-dragger {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
 </style>