上传文件各种转换二进制 blob file 说明

//FileReader 模式读取
readAsBinaryString(Blob|File):返回二进制字符串,该字符串每个字节包含一个0到255之间的整数。






-----------------------------------
readAsText(Blob|File, opt_encoding) :返回文本字符串。默认情况下,文本编码格式是'UTF-8',可以通过可选的格式参数,指定其他编码格式的文本。
readAsText方法用于读取文本文件,它的第一个参数是File或Blob对象,第二个参数是前一个参数的编码方法,如果省略就默认为UTF-8编码。该方法是异步方法,一般监听onload事件,用来确定文件是否加载结束,方法是判断FileReader实例的result属性是否有值。其他三种读取方法,用法与readAsText方法类似。
var reader = new FileReader();
reader.onload = function(e) {
  var text = reader.result;
}
reader.readAsText(file, encoding);
-----------------------------------






-----------------------------------
readAsDataURL方法返回一个data URL,它的作用基本上是将文件数据进行Base64编码。你可以将返回值设为图像的src属性。
readAsDataURL(Blob|File):返回一个基于Base64编码的data-uri对象。
var reader = new FileReader();
 
reader.onload = function(e) {
  var dataURL = reader.result;
}
 -----------------------------------
    
    
    
    
    
    
    -----------------------------------
reader.readAsDataURL(file);
readAsBinaryString方法可以读取任意类型的文件,而不仅仅是文本文件,返回文件的原始的二进制内容。这个方法与XMLHttpRequest.sendAsBinary方法结合使用,就可以使用JavaScript上传任意文件到服务器。
var reader = new FileReader();
reader.onload = function(e) {
  var rawData = reader.result;
}
 -----------------------------------
    
    
    
    
-----------------------------------
readAsArrayBuffer(Blob|File) :返回一个ArrayBuffer对象。
reader.readAsBinaryString(file);
readAsArrayBuffer方法读取文件,返回一个类型化数组(ArrayBuffer),即固定长度的二进制缓存数据。在文件操作时(比如将JPEG图像转为PNG图像),这个方法非常方便。
var reader = new FileReader();
reader.onload = function(e) {
  var arrayBuffer = reader.result;
}
reader.readAsArrayBuffer(file);
-----------------------------------


    
    
    
    
    
    
    
       //判断浏览器是否支持FileReader接口
            if (typeof FileReader == 'undefined') {
                 console.log('当前浏览器不支持FileReader接口!')
            }





            //示例控制文件大小
            function xmTanUploadFile(obj){
                if (obj.files.length < 1) return;

                var file = obj.files[0];
                
                if (file.size > 1024 * 1024) {
                    alert("文件大于1M, 太大了,小点吧!");
                    obj.value = "";
                    return;
                }
            }








             //读取文件过程方法读取过程
                var reader = new FileReader();
                    reader.onloadstart = function (e) {
                    console.log("开始读取....");
                }
                reader.onprogress = function (e) {
                    console.log("正在读取中....");
                }
                reader.onabort = function (e) {
                    console.log("中断读取....");
                }
                reader.onerror = function (e) {
                    console.log("读取异常....");
                }
                reader.onload = function (e) {
                    console.log("成功读取....");
                    var img = document.getElementById("xmTanImg");
                    img.src = e.target.result;
                    //或者 img.src = this.result;  //e.target == this
                }





				//示例添加请求接口参数 如:【post("/samples/exam-score-question/gradeEntering", param, config)】
              let param = new FormData(); // 创建form对象
              param.append("file", e.target.files[0], e.target.files[0].name);
              param.append("examId", this.examId);
              param.append("schoolId", this.importSchoolId);
              param.append("teacherId", this.$store.state.teacherId);
              param.append("courseId", this.courseRadioValue);




				//示例添加请求头和进度条   如:【post("/samples/exam-score-question/gradeEntering", param, config)】
			      var config = {
                    headers: {
                      "Content-Type": "multipart/form-data"
                    },
                    onUploadProgress: progressEvent => {
                      var complete =
                        ((progressEvent.loaded / progressEvent.total) * 100) | 0;
                      this.$nextTick(() => {
                        this.percentage = complete;
                      });
                    }
                  };


					  






			//示例控制文件类型
			      let name = e.target.files[0].name;
                  let num = name.indexOf(".");
                  let typeStr = name.substring(num + 1);
                  if (typeStr != "xlsx" && typeStr != "xls") {
                    this.$message({
                      message: "请上传Excel类型文档",
                      type: "warning"
                    });
                    return;
                  }













            //示例读取文件为二进制
            function readAsBinaryString() {
                var obj = document.getElementById("xmTanFile");
                if (obj.files.length < 1) return;

                var file = obj.files[0];
                var reader = new FileReader();

                //将文件以二进制形式读入页面
                reader.readAsBinaryString(file);
                reader.onload = function (f) {
                    document.getElementById("xmTanContentDiv").innerHTML = this.result;
                }
            }





            //示例读取文件为文本
            function readAsText() {
                var obj = document.getElementById("xmTanFile");
                if (obj.files.length < 1) return;

                var file = obj.files[0];
                var reader = new FileReader();

                //将文件以文本形式读入页面
                reader.readAsText(file);
                reader.onload = function (f) {
                    document.getElementById("xmTanContentDiv").innerHTML = this.result;
                }
            }