上传文件各种转换二进制 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;
}
}