【文件比较】前端上传文件和已有文件进行比较

起来改bug2024-07-26 9:54

需求：上传文件时比较已有文件是否存在，做出相应的操作；

1.小文件比较

内容比较：使用插件spark-md5，拿到文件的hash值，是一个字符串，然后和已有文件的hash进行比较即可；

javascript 复制代码

const fileToMD5 = (file: any) => {  
    return new Promise((resolve, reject) => {  
        const reader = new FileReader();  
        reader.onload = (e: any) => {  
            try {  
                const hash = SparkMD5.ArrayBuffer.hash(e.target.result);  
                resolve(hash);  
            } catch (error) {  
                reject(error);
            }  
        };  
        reader.onerror = (error) => {  
            reject(error);
        };  
        reader.readAsArrayBuffer(file);  
    });  
};

2.大文件

大文件稍微麻烦点，需要进行切片，然后在拿到hash，具体代码如下:

javascript 复制代码

const handlelargeFile = (file: any, callback: any) => {
    const reader = new FileReader();
    const chunkSize = 2097152; // 2MB
    let chunks = Math.ceil(file.size / chunkSize);
    let currentChunk = 0;
    let spark = new SparkMD5.ArrayBuffer();
    const loadNext = () => {
        if (currentChunk < chunks) {
            const start = currentChunk * chunkSize;
            const end = Math.min(start + chunkSize, file.size);
            const blob = file.slice(start, end);
            reader.onload = (e: any) => {
                spark.append(e.target.result);
                currentChunk++;
                if (currentChunk < chunks) {
                    loadNext();
                } else {
                    const hash = spark.end();
                    callback && callback(hash)
                }
            };
            reader.readAsArrayBuffer(blob);
        }
    };
    loadNext();
}

首先读文件，其次，设置分片大小（2MB），计算切片个数，使用FileReader以ArrayBuffer形式读取文件时，可以分多次读取文件的不同部分，并使用append()方法将每个部分追加到SparkMD5的实例中。最后，通过调用end()方法，你可以获取到整个文件的MD5哈希值。然后再进行比较。

3.文件重命名下载

对已经存在的文件，名字是无法修改的，但是可以保存成新的文件然后进行上传：

javascript 复制代码

const name_new = file.name.replace(`${fileName}.`, `${fileName}(1).`);
file.arrayBuffer().then((buffer: any) => {
 let newBlob = new Blob([buffer], { type: file.type });
 let newFile = new File([newBlob], name_new, { type: file.type });
 // 执行上传
});