el-upload文件唯一标识

el-upload 是 Element UI 中的一个上传组件，uid 是该组件中的一个属性，用于标识唯一的上传文件的用户 ID。 当一个页面上存在多个 el-upload 组件时，通过设置不同的 uid 可以确保每个组件上传的文件是独立的。例如，在一个表单中有多个上传组件，每个组件上传的文件需要与对应的表单字段关联，使用不同的 uid 可以确保正确地将文件关联到特定的字段。 通过设置 uid，可以实现以下功能： 1. 在上传文件时，可以根据 uid 来识别文件属于哪个组件。 2. 在处理上传完成后的回调或者删除文件时，可以根据 uid 来操作对应的文件。 总之，uid 属性是为了确保每个 el-upload 组件可以独立处理自己的文件操作，防止不同组件之间的文件混淆。

### 解决方案 为了防止 `el-upload` 组件重复上传相同文件，在前端可以采取多种策略来确保同一文件不会被多次提交给服务器。一种常见做法是在每次上传前检查当前已存在的文件列表，判断待上传文件是否已经存在于这些记录中。 具体实现方式如下： #### 方法一：通过文件名和大小校验 可以在选择文件时立即进行初步筛选，利用文件名称以及其尺寸作为唯一标识组合来进行对比验证。如果发现有相同的文件，则阻止继续操作并向用户提供提示信息[^1]。 ```javascript beforeUpload(file) { const isExist = this.fileList.some(item => item.name === file.name && item.size === file.size); if (isExist) { this.$message.warning('该文件已存在！'); return false; } } ``` 此段代码定义了一个名为 `beforeUpload` 的函数用于拦截上传请求之前的操作。它会遍历现有的文件列表 (`this.fileList`) 并查找是否有任何项与即将上传的新文件具有完全一致的名字和大小；一旦找到匹配项即认为是重复文件，并给出警告消息同时返回 `false` 来取消此次上传尝试。 #### 方法二：基于哈希值比较 更严谨的方法是对每一个选中的文件计算唯一的哈希摘要（如MD5），并将这个值存储起来供后续对照使用。当再次遇到同一名字的文件时不仅要看名字还要看它们各自的哈希码是否相等——只有两者都吻合才算是真正的重复文件[^2]。 ```javascript import SparkMD5 from 'spark-md5'; function getFileHash(file, callback){ let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice, chunkSize = 2097152, // Read in chunks of 2MB chunks = Math.ceil(file.size / chunkSize), currentChunk = 0, spark = new SparkMD5.ArrayBuffer(), fileReader = new FileReader(); function loadNext() { let start = currentChunk * chunkSize, end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); } fileReader.onload = function(e) { spark.append(e.target.result); // Append array buffer currentChunk++; if(currentChunk < chunks) { loadNext(); } else { callback(null, spark.end()); } }; fileReader.onerror = function() { callback(fileReader.error); }; loadNext(); } // 使用上述方法获取文件hash并与已有数据对比 beforeUpload(file) { var that = this; getFileHash(file,(err, hash)=>{ if(err){ console.log("Error:", err); return ; } const isExist = this.hashList.includes(hash); if(isExist){ this.$message.warning('该文件已存在！'); return false; }else{ this.hashList.push(hash); return true; } }); } ``` 这段代码展示了如何创建一个异步的任务去读取并处理大文件的内容片段以生成对应的 MD5 值。之后再将得到的结果存入到数组 `hashList` 中以便于以后查询是否存在重复的情况。对于新加入的文件也会调用同样的逻辑做一次完整的检验流程。