图片在上传过程中获取宽高、base64以及blob

上传图片

上传图片的方式采用html5中通用文件上传。

<input type="file" ref="inputFile">

获取上传中的内容

let inputFile = this.$refs.inputFile
$(inputFile).on('change',(e)=>{
 // 获取文件上传内容
  let file = e.target.files[0]
 // 获取文件上传类型
  let type = file.name.slice(file.name.lastIndexOf('.')+1)
  if(!type.match(/png|jpg/)) return
})

在上传中获取图片宽高

通过html5中提供的文件读取filerReader

let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function(theFile) {
  let img = new Image()
  img.onload= function() {
    // 获取文件上传的宽高
    imgW = img.width
    imgH = img.height
  }
  img.src = theFile.target.result
}

获取图片base64以及blob

在上面fileReader对象中获取到的theFile是对应的图片流，theFile.target.result为对应的base64，那base64如何转换为blob呢？

var data = window.atob(base64Str.split(',')[1]) // binary data
var ia = new Uint8Array(data.length)
for (var i = 0, l = data.length; i < l; i++) {
  ia[i] = data.charCodeAt(i)
}
var blob = new window.Blob([ia], { type: 'image/jpg' })