JS的文件操作（文件选取或图片转Base64）

在网页浏览器，用js处理文件有两种方式，一种是input标签取得文件，另一种是直接拖拽文件到网页中即读取。

1.在input组件中取得文件

我的博客这里写了一个在vue中上传二进制文件的博客可参阅

  <input type="file" name="file" accept=".jpg, .jpeg, .png" onchange="uploadAvatar"><!--普通html-->
    <input type="file" name="file" accept=".jpg, .jpeg, .png" @change="uploadAvatar"><!--vue中-->

//操作文件的方法
uploadAvatar(avatar) {
        console.log(avatar.target.files[0])
        let file = avatar.target.files[0]//重点
        //往后可用filereader取得base64或者二进制编码
     /*
     let data = new FormData();
  data.append("file", file, file.name);
  */
  //或者转base64
}

2.直接拖拽文件到网页中取得文件
利用FileReader与addEventListener

var container = $('#js-drop-zone');
    function registerFileDrop(container, callback) {
/*
container 是目标div
callback是回调函数
*/
    function handleFileSelect(e) {
        e.stopPropagation();
        e.preventDefault();

        var files = e.dataTransfer.files;//重点

        var file = files[0];

        var reader = new FileReader();

        reader.onload = function (e) {

            var xml = e.target.result;

            callback(xml);
        };

        reader.readAsText(file);//这里直接读取为text
        reader.readAsDataURL(file);//这里是图片的话直接读取为base64
        reader.readAsBinaryString(file);//读取为string类型的二进制字符串
    }
    container.get(0).addEventListener('drop', handleFileSelect, false);
}

综上，就是要认识FileReader对象