SparkMD5获取不同图片的md5显示相同,解决办法

按道理来说,不同的图片应该具有不同的md5,但是在测试的时候发现上传不同的图片md5总是一样的。
SparkMD5获取不同图片的md5显示相同,解决办法_第1张图片
看看代码:

    handleFileChange(file) {
      console.log(file) // 变化的文件对象
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      var Spark = new SparkMD5.ArrayBuffer()
      const that = this
      reader.onload = function(event) {
        const img_base64 = event.target.result
        console.log(img_base64)
        that.basic_config_info.logo_stream = img_base64
        Spark.append(event.target.result)
        var md5 = Spark.end()
        console.log('md5')
        console.log(md5)
        if (that.basic_config_info.logo_md5 === md5) {
          console.log('相等')
        } else {
          console.log('不相等')
        }
        that.basic_config_info.logo_md5 = md5
      }
    },

SparkMD5获取不同图片的md5显示相同,解决办法_第2张图片
我既要获取到图片的base64也要获取到md5,而reader.readAsDataURL(file.raw)用来获取base64,如果用来获取md5,就会出现相同的md5,正确获取md5应该使用reader.readAsArrayBuffer(file.raw)
所以应该设置两个不同的reader来分别获取base64和md5
下面是正确的代码:

    handleFileChange(file) {
      console.log(file) // 变化的文件对象
      const stream_reader = new FileReader()
      const md5_reader = new FileReader()
      stream_reader.readAsDataURL(file.raw)
      md5_reader.readAsArrayBuffer(file.raw)
      const that = this
      stream_reader.onload = function(event) {
        const img_base64 = event.target.result
        console.log(img_base64)
        that.basic_config_info.logo_stream = img_base64
      }
      md5_reader.onload = function(event) {
        var Spark = new SparkMD5.ArrayBuffer()
        Spark.append(event.target.result)
        var md5 = Spark.end()
        console.log('md5')
        console.log(md5)
        that.basic_config_info.logo_md5 = md5
      }
    },

然后上传不同的图片,就会发现具有不同的md5啦!
SparkMD5获取不同图片的md5显示相同,解决办法_第3张图片

你可能感兴趣的:(前端,前端)