文件上传优化

src/assets/styles/common.css

@@ -687,6 +687,7 @@ page {
 	font-weight: bold;
 	background-color: #f1f2f4 !important;
     border-color: #f1f2f4 !important;
+	font-family: pingfangr;
 }
 .md-menu .el-menu-item:hover,
 .md-menu .el-sub-menu .el-menu-item:hover,

src/components/CloudDisk/index.vue

@@ -52,7 +52,7 @@
                     <FileInput @change="files => insertImageElement(files)">
                        <div class="CloudDisk-R-Box">
                         <div class="CloudDisk-R-Plus column items-center cusor-pointer">
-                            <el-icon class="el-input__icon" color="#CECECE" size="30px" title="">
+                            <el-icon class="el-input__icon" size="30px" title="">
                                 <Plus/>
                             </el-icon>
                             <span>添加图片</span>
@@ -64,7 +64,7 @@
                         <div class="CloudDisk-R-Box cursor-pointer" 
                         :class="[ImgId==item.DetailsId?'active':'active2']" @click="setImg(item)">
                             <div class="CloudDisk-R-Img">
-                                <el-image :src="item.FilePath" style="width: 80px; height: 80px;"
+                                <el-image :src="item.FilePath" style="width: 100%; height: 100%;"
                                 fit="cover"/>
                                 <!-- <el-image
                                     style="width: 80px; height: 80px"
@@ -130,7 +130,7 @@
 import { Plus, Top, Bottom, Delete, Edit  } from "@element-plus/icons-vue";
 import { reactive, ref, onMounted, watch} from "vue";
 import CloudDiskService from '@/services/CloudDiskService'
-import { ElMessage } from "element-plus";
+import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
 import FileInput from '@/components/FileInput.vue'
 import { getImageDataURL } from '@/utils/image'
 import AliyunUpload from '@/utils/upload/aliyun'
@@ -194,18 +194,50 @@ const insertImageElement = async (files: FileList) => {
         text:'正在上传图',
         lock:true
     })
+    const hash = await calculateFileHash(files[0])
+    if(!hash || hash=='') {
+        ElMessage.error({message:'文件校验失败，请重试'})
+        loadingObj.close()
+        return;
+    }
+
+    //TODO: 实现校验HASH值是否存在，如果不存在，才调用下面的这个方法。
+    await uoloadFileToService(files[0])
+    loadingObj.close()
+}
+
+const uoloadFileToService = async (file:File)=>{
     let parms = {
         isppt: '1',
         uid: token.value,
         gid: queryObj.CloudGroupId
     }
     let filePath="tripImg/";
-    console.log("ssss");
-    let url  = await AliyunUpload.UploadCloudDisk(files[0], filePath, parms);
+    let url  = await AliyunUpload.UploadCloudDisk(file, filePath, parms);
     if(url) Search()
-     setTimeout(()=>{
-        loadingObj.close()
-    },300)
+}
+
+const calculateFileHash = (file:File, algorithm = 'SHA-256') => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+        if(event && event.target && event.target.result){
+            const buffer:any = event.target.result;
+            crypto.subtle.digest(algorithm, buffer)
+            .then(hashBuffer => {
+                const hashArray = Array.from(new Uint8Array(hashBuffer));
+                const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+                resolve(hashHex);
+            })
+            .catch(error => reject(error));
+        }else{
+            reject('')
+        }
+        
+    };
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(file); // Read only the first 1MB of the file
+  });
 }
 
 // 删除
@@ -313,7 +345,7 @@ const querySearchGroup = async () =>{
 const SearchImg = () =>{
     if(queryObj.FileName=='') Search()
 }
-const Search = (item:any) =>{
+const Search = (item:any=null) =>{
     if(item) {
         queryObj.CloudGroupId = item.Id
         GroupObj.value = item
@@ -441,16 +473,21 @@ onMounted(()=>{
     width: 80px;
     height: 80px;
     border-radius: 8px;
-    border: 2px dashed #000000;
+    border: 2px dashed #CECECE;
+    color:#cecece;
+}
+.CloudDisk-R-Plus:hover{
+    border-color: #000000;
+    color:#000000;
 }
 .CloudDisk-R-Plus .el-icon{
     margin-top: 13px;
 }
 .CloudDisk-R-Plus span{
-    font-family: PingFang SC;
+    // font-family: PingFang SC;
     font-weight: 400;
     font-size: 14px;
-    color: #000000;
+    // color: #CECECE;
 }
 .CloudDisk-R-Box{
     width: 80px;
@@ -464,10 +501,12 @@ onMounted(()=>{
     margin-bottom: 9px;
     border-radius: 8px;
     overflow: hidden;
+    border:2px solid transparent;
 }
 
 .CloudDisk-R-Img .el-image{
     width: 76px;
+    
 }
 .title{
     width: 80px;
@@ -489,7 +528,7 @@ onMounted(()=>{
     background: #8790F3;
     box-shadow: 0px 0px 13px 0px #0D3EBC;
     border-radius: 8px;
-    border: 2px solid #3556F9;
+    border-color:#3556F9;
 }
 .CloudDisk-R-Box .close-btn{
     position: absolute;