emacroh5lib 1.0.24 → 1.0.25

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "EMacro前端组件库",
-  "main": "dist/emacroh5lib.min.js", 
+  "main": "dist/emacroh5lib.min.js",
   "scripts": {
     "build": "webpack --mode=production --node-env=production",
     "build:dev": "webpack --mode=development",
@@ -78,6 +78,7 @@
     "@types/js-cookie": "^3.0.1",
     "@vue/cli-plugin-typescript": "^5.0.4",
     "axios": "^0.26.1",
+    "browser-md5-file": "^1.1.1",
     "core-js": "^3.22.2",
     "deep-eql": "^4.0.0",
     "echarts": "^5.3.2",
@@ -92,6 +93,7 @@
     "query-string": "^7.0.1",
     "register-service-worker": "^1.7.2",
     "three": "^0.139.2",
+    "types": "file:../../browser-md5-file",
     "typings": "^2.1.1",
     "vue": "^2.6.14",
     "vue-class-component": "^7.2.3",

package/src/router/index.ts

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import FileViewer from '../views/FileViewer/index.vue'
+import TestView from '../views/TestView/index.vue'
 
 Vue.use(VueRouter)
 
@@ -10,23 +12,15 @@ const routes: Array<RouteConfig> = [
     name: 'home',
     component: HomeView
   },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  },
   {
     path: '/FileViewer',
     name: 'FileViewer',
-    component: () => import('../views/FileViewer/index.vue')
+    component: FileViewer
   }, 
   {
     path: '/TestView',
     name: 'TestView',
-    component: () => import('../views/TestView/index.vue')
+    component: TestView
   },
 ]
 

package/src/utilities/File.ts

@@ -1,5 +1,6 @@
 
 import * as XLSX from "xlsx";
+import BMF from 'browser-md5-file';
 
 export namespace EMacro {
 
@@ -7,9 +8,25 @@ export namespace EMacro {
 
     export class File {
 
-        public static getFileMD5(file: File): string {
+        public static getFileMD5(file) {
+            return new Promise((res, rej) => {
 
-            throw "NG"
+                const fileReader = new FileReader()
+                fileReader.readAsBinaryString(file);
+                fileReader.onload = e => {
+                    const bmf = new BMF();
+                    bmf.md5(file, (err, md5) => {
+                        if (err !== null) {
+                            rej(err)
+                        } else {
+                            res(md5)
+                        }
+                    }, progress => {
+                        console.log('getFileMD5 progress number:', progress);
+                    });
+                }
+
+            })
         }
 
         private static getBase64(blob) {
@@ -21,60 +38,67 @@ export namespace EMacro {
             });
         }
 
-        public static getFileChunks(file: any): any {
+        public static getFileChunks(file: any, chunkSize: number = 1024 * 1024 * 1): any {
 
-            let {size}  = file
-
-            const sliceSize = 1024 * 1024 * 2;
-            let totalChunks = Math.ceil(size / sliceSize)
+            let { size } = file
+            let totalChunks = Math.ceil(size / chunkSize)
             let fileChunks = new Array<any>()
-            if (size > sliceSize) {
+            if (size > chunkSize) {
                 for (let i = 0; i < totalChunks; i++) {
-                    let start = i * sliceSize
-                    let end = (i + 1) * sliceSize
+                    let start = i * chunkSize
+                    let end = (i + 1) * chunkSize
                     let chunk = file.slice(start, end)
                     fileChunks.push(chunk)
                 }
             } else {
                 fileChunks.push(file)
             }
-            return { "fileChunks": fileChunks, "sliceSize": sliceSize, "chunksLength": fileChunks.length }
+            return { "fileChunks": fileChunks, "sliceSize": chunkSize, "chunksLength": fileChunks.length }
         }
 
         // 文件上传
-        public static uploadFiles(files, postFunc, errFunc = (err) => {
+        public static uploadFiles(files, postFunc, chunkSize: number = 1024 * 1024 * 1, errFunc = (err) => {
             console.error(err);
         }) {
 
             if (files[0].fileName == "" || files[0].fileSize == "" || files[0].fileSize == 0) {
-                throw new Error("文件列表为空")
+                throw new Error("文件异常")
             }
 
-            let that = this
             for (let i = 0; i < files.length; i++) {
-                const file = files[i]; 
-                let { fileChunks, sliceSize, chunksLength } = File.getFileChunks(file)
-                for (let index in fileChunks) {
-                    let chunk = fileChunks[Number(index)]
-                    setTimeout(async () => {
-                        await File.getBase64(chunk).then((base64: any) => {
-                            let data = {
-                                'chunkIndex': Number(index), // 分片位置
-                                'chunksLength': chunksLength, // 分片长度
-                                'sliceSize': sliceSize, // 分片大小
-                                'chunkSize': chunk.size, // 当前分片实际大小
-                                'fileSize': file.size, // 文件总大小
-                                'fileName': file.name, // 文件名
-                                'data': base64.split(';base64,')[1], // 文件数据 
-                                'lastModifiedDate': file.lastModifiedDate,  // 最后修改时间
-                                'dataType': 'base64' // 数据的类型
-                            }
-                            postFunc(data)
-                        }).catch((err) => {
-                            errFunc({ err: err, file: file.file, chunkIndex: index, fileName: file.name })
-                        })
-                    }, 10);
-                }
+                const file = files[i];
+                let { fileChunks, sliceSize, chunksLength } = File.getFileChunks(file, chunkSize)
+
+                File.getFileMD5(file).then(md5 => {
+
+                    for (let index in fileChunks) {
+                        let chunk = fileChunks[Number(index)]
+
+                        setTimeout(async () => {
+                            await File.getBase64(chunk).then((base64: any) => {
+                                let data = {
+                                    'chunkIndex': Number(index), // 分片位置
+                                    'chunksLength': chunksLength, // 分片长度
+                                    'sliceSize': sliceSize, // 分片大小
+                                    'chunkSize': chunk.size, // 当前分片实际大小
+                                    'fileSize': file.size, // 文件总大小
+                                    'fileName': file.name, // 文件名
+                                    'data': base64.split(';base64,')[1], // 文件数据 
+                                    'lastModifiedDate': file.lastModifiedDate,  // 最后修改时间
+                                    'md5': md5,
+                                    'dataType': 'base64' // 数据的类型
+                                }
+                                postFunc(data)
+                            }).catch((err) => {
+                                errFunc({ err: err, file: file.file, chunkIndex: index, fileName: file.name })
+                            })
+                        }, 10);
+                    }
+
+                }).catch(err => {
+                    throw err
+                })
+
             }
         }
 

package/src/views/TestView/index.vue

@@ -4,6 +4,7 @@
     <button @click="handleOpen">打开查看器</button>
     <button @click="exportExcel($event)">透过Excel模板导出表格</button>
     <button @click="selectFile($event)">选择文件</button>
+    <button @click="fileMD5($event)">文件MD5</button>
 
     <image-viewer :list="srcList" @open="openCallback" @close="closeCallback" :show.sync="showViewer"
       :currentIndex="currentIndex" />
@@ -45,10 +46,10 @@ import { EMacro } from "../../utilities/File";
 import axios from 'axios'
 import Cookie from 'js-cookie'
 
+import LAY_EXCEL from 'lay-excel';
 
+import BMF from 'browser-md5-file';
 
-import LAY_EXCEL from 'lay-excel';
-import { error } from "jquery";
 
 @Component({
   components: {
@@ -256,6 +257,35 @@ export default class TestView extends Vue {
     console.log("changeSize index", index);
   }
 
+  public fileMD5() {
+
+    EMacro.File.selectFile().then(files => {
+
+      if (files == null) {
+        return
+      }
+
+      EMacro.File.getFileMD5(files[0]).then(md5 => {
+
+        console.log("文件MD5", md5);
+
+      })
+
+
+      // new MD5().update(buffer).digest()
+
+
+      // const hash = crypto
+      //   .createHash('md5')
+      //   .update(files[0], 'utf8')
+      //   .digest('hex');
+
+    })
+
+
+
+  }
+
   public mounted() {
     const listEl = document.getElementById('list') as HTMLElement;
     this.listWidth = listEl.clientWidth;