利用文件名md5值实现秒传功能

通过js-spark-md5获取文件的md5值实现秒传功能，demo地址：9px.ir/demo/increm…

以下是实现方法：

// 判断文件是否是视频(有些视频 无法识别，当文件处理，如flv等)
export function fileIsVideo(filename) {  
    if(typeof filename !== 'string' || !filename) {    
        console.error('文件名/文件类型 参数必须存在且为字符串类型')    
        return ''  
    }  
    let lowerName = filename.toLowerCase()  
    /**   * 针对部分 系统无法播放的 部分格式视频，当文件处理（mov,flv等格式）   */  
    return /[.](mp4|mov|rmvb|avi|ogg)$/.test(lowerName)
}

// 判断文件是否是图片
export function fileIsImg(filename) {  
    if(typeof filename !== 'string' || !filename) {    
        console.error('文件名/文件类型 参数必须存在且为字符串类型')    
        return ''  
    }  
    let lowerName = filename.toLowerCase()  
    return /[.](png|jpg|jpeg|gif|bmp|svg|webp)$/.test(lowerName)
}

import SparkMD5 from 'spark-md5'
export const getMediaInfo = (files, callback) => {  
    const fileList = [...files]  
    fileList.forEach(fileItem => {    
        if(fileIsImg(fileItem.name)) {      
            fileItem = getFileMD5(fileItem, 1)    
        } else if(fileIsVideo(fileItem.name)) {      
            fileItem = getFileMD5(fileItem, 2)    
        } else {      
            // 非视频 非图片文件      
            fileItem = getFileMD5(fileItem, 0)    
        }  
    })
    return fileList
}

/** * 获取文件的MD5值 
    * @param { File } file 文件原生信息 
    * @param { Number } type 0-文件类型 1-图片类型 2-视频格式 
    * @param { Number } chunkSize 块的大小 
    */
function getFileMD5(file, type = 0, chunkSize = 4000000) {  
    console.log('getFileMD5Info:', file, type)  
    const fileReader = new FileReader()  
    let currentChunk = 0  
    let spark = new SparkMD5.ArrayBuffer()  
    let chunks = Math.ceil(file.size / chunkSize)  
    let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice  
    fileReader.onload = function(e) {        
        let fileResult = e.target.result    
        spark.append(fileResult)    
        currentChunk ++    
        if(type === 1) {      
            const img = new Image()  
            img.src = fileResult        
            img.onload = function() {          
                file.width = img.width          
                file.height = img.height        
            }      
            file.src = getObjectURL(file)    
        } else if(type === 2) {      
            const video = document.createElement('video')      
            video.src = fileResult      
            video.onloadeddata = function(evt) {        
                console.log('duration:', video.duration, evt)        
                file.duration = video.duration        
                file.width = this.videoWidth        
                file.height = this.videoHeight      
            }    
        }    
        if(currentChunk < chunks) {      
            loadNext()    
        } else {            
            let fileMd5 = spark.end()      
            file.fileMd5 = fileMd5      
            console.log('computed hash:', currentChunk, fileMd5)      
            console.log('computed fileMd5:', file)      
            return file    
        }  
    }  
    loadNext()  
    function loadNext() {    
        let start = currentChunk * chunkSize    
        let end = (start + chunkSize) >= file.size ? file.size : (start + chunkSize)    
        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))  
    }
}

附：

windows电脑查看系统文件的md5值：

1. 打开cmd,

2.输入命令： certutil -hashfile 文件路径 MD5 ，如 certutil -hashfile D:\1.exe MD5

亦可查看其他加密模式

certutil -hashfile D:\1.exe SHA1     // SHA1
certutil -hashfile D:\1.exe SHA256    // SHA256

MAC电脑：

1.打开terminal,

2. 输入命令 md5 文件名   ， 如 md5 /Users/channe/Downloads/md5file.JPG