FileReader

属性files的类型是FileList，一个类数组，由浏览器通过用户行为往里面添加或删除元素，JS只有访问接口，无法操作。而files的元素就是File类型，File是blob的子类，比blob主要多出一个name的属性。
该元素只是一个指向文件系统的引用,如果想要取到这个文件的备份,就需要通过FileReader把数据读出来保存在浏览器中。

readAsArrayBuffer=>ArrayBuffer

• 二进制数据的存储器,可通过ArrayBufferView以8位、16位、32位、64位数字为元素对ArrayBuffer内的二进制数据进行展现。
• 可用于生成Blob,然后添加到FormData去上传。

readAsBinaryString =>BinaryString

• 是二进制数据直接以byte的形式展现的字符串,ArrayBuffer对应的Uint8Array的字符形式的表现

readAsDataURL =>DataURL

• 包括mimeType和base64编码后的binaryString,可以直接给使用：
  data:[mimeType];base64,[base64(binaryString)]
• 可借此获取mimeType和binaryString
  var binaryString = atob(dataUrl.split(',')[1]),
  mimeType = dataUrl.split(',')[0].match(/:(.*?);/)[1];

截图上传的一个完整流程:

1. canvas截图并使用toDataURL,获取DataURL
2. 通过binaryString = atob(dataUrl.split(',')[1])获取BinaryString
3. 通过Uint8Array和charCodeAt把binaryString转化为ArrayBuffer
4. ArrayBuffer存入Blob并添加到FormData上传,服务器最终收到BinaryString

注意,formdata在send时必须使用ArrayBuffer,因为BinaryString为字符串,当send发送时会对字符串进行utf8编码导致数据被破坏。

一个预览并上传图片的demo

也可以把ArrayBuffer缓存入Blob,通过websocket给img一个url进行预览

reader.readAsArrayBuffer(imgs.files[0]);
  reader.onload=function(e){
  var bf = this.result;
  var blob = new Blob([bf],{type:"text/plain"});
  img.src = URL.createObjectURL(blob);
}

var bytes = new Uint8Array()可以接受一个length,或bufferArray作为参数