前端文件上传 原生

input.οnchange=function(){
//查看文件变化 有哪些参数
// for(var key in this){
// console.log(key,this[key]);
// }
console.log(’=============’,this.files);
let file = this.files[0]
let reader = new FileReader();
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内
// reader.readAsText(file)
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
// reader.readAsDataURL(file)
// 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
reader.readAsArrayBuffer(file);
/* 事件处理
reader.onabort
处理abort (en-US)事件。该事件在读取操作被中断时触发。
reader.onerror (en-US)
处理error (en-US)事件。该事件在读取操作发生错误时触发。
reader.onload
处理load (en-US)事件。该事件在读取操作完成时触发。
reader.onloadstart
处理loadstart (en-US)事件。该事件在读取操作开始时触发。
reader.onloadend
处理loadend (en-US)事件。该事件在读取操作结束时（要么成功，要么失败）触发。
reader.onprogress
处理progress (en-US)事件。该事件在读取Blob时触发。*/

        reader.onload = function(data){
            //reader.result 文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
         /* 
            属性
        reader.error 只读
        一个DOMException，表示在读取文件时发生的错误 。
        reader.readyState 只读
        表示FileReader状态的数字。取值如下：
        常量名	值	描述
        EMPTY	0	还没有加载任何数据.
        LOADING	1	数据正在被加载.
        DONE	2	已完成全部的读取请求.
        reader.result 只读
        文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
        */

            console.log(reader.result)
        }
        
        // console.log('file',reader);
    }