添加发送文件功能，文件md5值计算

package-lock.json

@@ -16,6 +16,7 @@
         "js-md5": "^0.8.3",
         "markdown-it": "^14.1.0",
         "qrcode": "^1.5.3",
+        "spark-md5": "^3.0.2",
         "video.js": "^8.9.0",
         "vue": "^3.3.11",
         "vue-cookies": "^1.8.3",
@@ -2054,6 +2055,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/spark-md5": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
+      "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw=="
+    },
     "node_modules/string-split-by": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/string-split-by/-/string-split-by-1.0.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "js-md5": "^0.8.3",
     "markdown-it": "^14.1.0",
     "qrcode": "^1.5.3",
+    "spark-md5": "^3.0.2",
     "video.js": "^8.9.0",
     "vue": "^3.3.11",
     "vue-cookies": "^1.8.3",

src/api/tool.js

@@ -33,4 +33,5 @@ export const UploadFileService = (formData,token) => {
             'token': token, 
         }
     })
-}
+}
+

src/views/Chat.vue

@@ -222,7 +222,7 @@ import { getFriendListService } from "@/api/chat.js";
 import { getMessageService } from "@/api/chat.js";
 import { sendMessageService } from "@/api/chat.js";
 import { UploadFileService } from "@/api/tool.js";
-import FileUpload from "@/views/FileUpload.vue";
+
 import {
   ElAvatar,
   ElDropdown,
@@ -241,6 +241,7 @@ import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
 import router from "@/router/index.js";
 import { ElMessage } from "element-plus";
 import MarkdownIt from 'markdown-it';
+import CryptoJS from 'crypto-js';
 
 export default {
   data() {
@@ -249,6 +250,7 @@ export default {
       tableData: [],
       sendImgDialogVisible: false,
       file : null,
+      file_md5: "",
       tokenData: {
         token: localStorage.getItem("token"),
         ip: localStorage.getItem("ip"),
@@ -606,6 +608,25 @@ export default {
         console.error(error);
       }
     },
+    handleFileSelect() {
+      let mdt_ = "";
+      if (this.file) {
+        try {
+          const reader = new FileReader();
+          reader.onloadend = function (e) {
+            if (e.target.readyState === FileReader.DONE) {
+              const arrayBuffer = e.target.result;
+              const spark = new SparkMD5.ArrayBuffer();
+              spark.append(arrayBuffer);
+              md5Value.value = spark.end();
+            }
+          };
+          reader.readAsArrayBuffer(this.file);
+        } catch (error) {
+          console.error('计算MD5值出错:', error);
+        }
+      }
+    },
     
     handleMenuSelect(val) {
       router.push(val);
@@ -618,6 +639,23 @@ export default {
       this.file = e.target.files[0];
       console.log("file has been selected:", this.file);
     },
+    readFileAndCalculateMD5() {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                const wordArray = CryptoJS.lib.WordArray.create(event.target.result);
+                const md5Hash = CryptoJS.MD5(wordArray);
+                const md5Str = md5Hash.toString(CryptoJS.enc.Hex);
+                //console.log("onload: " + md5Str);
+                this.file_md5 = md5Str;
+                resolve(md5Str);
+            };
+            reader.onerror = (error) => {
+                reject(error);
+            };
+            reader.readAsArrayBuffer(this.file);
+        });
+    },
     async sendImageOrVideo(){
       if (this.file == null) {
         alert('请先选择要上传的文件');
@@ -626,10 +664,15 @@ export default {
       //查看文件是否是图片或视频
  
       try {
+        this.file_md5 = await this.readFileAndCalculateMD5(this.file);
+        //console.log("md5:",this.file_md5);
+
+
         let formData = new FormData();
         formData.append('file', this.file);
         //console.log("add file: " + this.file);
         formData.append('upload_type', "1");
+        formData.append('md5', this.file_md5);
         formData.append('auth_type', "public");
         //console.log("formData:",formData);
 
@@ -641,7 +684,7 @@ export default {
         }
         let resp_data = result.data;
         //console.log("resp:",resp_data);
-        let url = "https://gep.ljsea.top/tool/file/"+resp_data.file_store_name;
+        let url = "https://gep.ljsea.top/tool/file/"+resp_data.FileStoreName;
         let msg_ ="";
         //markdown 图片格式
         let fileType = this.file.name.split('.')[1];
@@ -680,7 +723,7 @@ export default {
           Msg: msg_,
           CreatedAt: new Date(),
         };
-        //console.log("msg:",msg);
+        console.log("msg:",msg);
         this.MsgList.push(msg);
         this.scrollToBottom();
         this.sendImgDialogVisible = false;