文件格式转换base64生成内容hash

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情

将文件对象转成base64

利用FileReader API ,首先实例化一个FileReader类，然后使用它的readAsDataURL方法将文件读取一下子，这个过程是个异步过程，监听onload事件，文件读取完成就触发这个方法了，读取失败就触发了onerror事件。总之给一个文件类型就可以得到一个base64或者一个错误信息

兼容去还可以的啦

export const readFile = (file) => {
  return new Promise((resove,reject) => {
    const fileReader = new FileReader()
    fileReader.readAsDataURL(file)
    fileReader.onload = (e) => {
      resove(e.target.result)
    }
     fileReader.onerror = (e) => {
      reject('错误')
    }
  })
}

spark_md5

当我们上传文件的时候，文件内容不会根据文件名修改而改变，不同文件类型都可以用进制工具查看（十六进制编辑器UltraEdit），对应的文件内容也是固定的。那些文件续传或者秒传的功能就是根据文件内容生成唯一的hash，上传之前让后台判断是否传递过，或者传递了哪些，再根据状态续传或者秒传。

今天分享的是spark-md5这个包，可以根据内容获取唯一的hash。

安装：

npm install --save-dev spark-md5

根据文件对象获取文件的内容buffer类型，再利用spark-md5将buffer数组转换成内容hash,得到一个hash串，这个hash串就是文件的名字。后面同一个文件，由于内容相同，所以生成的hash一定相同，就避免重复的图片反复上传，节省了服务器资源。 转换步骤 首先利用fileReader读取文件对象内容为ArrayeBuffer格式，得到ArrayBuffer后，实力话一个sparkMd5。ArrayBuffer,然后append上面文件buffer,最后end方法获取hash值。

export const readFileBuffer = (file) => {
  return new Promise((resove, reject) => {
    const fileReader = new FileReader()
    fileReader.readAsArrayBuffer(file)
    fileReader.onload = (e) => {
      const buffer = e.target.result
      const spark = new sparkMd5.ArrayBuffer()
      spark.append(buffer)
      const hash = spark.end()
      const suffix = /.([a-zA-Z0-9]+)$/.exec(file.name)[1]
      resove({ buffer, hash, suffix, filename:`${hash}.${suffix}` })
    }
    fileReader.onerror = (e) => {
      reject('错误')
    }
  })
}

这样上传时给服务器发送根据文件内容生成的文件名，后端就不用考虑别的，直接使用就行了，如果上传相同名字的，后端判断一下，直接返回成功，告诉前端，该图片服务器上已经存在了