前端 文件流 / blob / file 转换

需求以及背景

这两天有个需求：
把上传的/后台返回的图片文件加一个图片转换文字的ocr功能。

目前遇到两种情况，一个是从后台接收的文件流，类似以下：

一个是用elementui组件获取的file对象类型格式文件。

解决：

关于blob/file

blob参数要求看这个
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
file参数要求看这个
https://developer.mozilla.org/zh-CN/docs/Web/API/File
FormData看这个
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

初始文件流

查阅多方资料，在拿文件流的时候不能用封装的jq方式请求接口（尝试过确实不行），需要用原生的XMLHttpRequest请求。

思路： 文件流->blob/file->FormData 如下：

var _this = this;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'api/******/******?jsonData='+JSON.stringify({id: row.id}), true);//获取文件流的接口
xhr.send();
xhr.responseType = "blob";//不能漏
xhr.onload = function () {
	if (this.status === 200) {
		var blob = new Blob([this.response],{type:'image/png'}); 
		blob.lastModifiedDate =new Date(); 
		var wj = new FormData(); 
		wj.append("file",blob,blob.name);
		//以下方式也可以，但是ie不兼容file构造函数，白搭
		// var myFile = new File([this.response],row.wjm,{type: 'image/png'});
		// var wj = new FormData();
		// wj.append('file', myFile, myFile.name);
		httpRequest({
			url: '/api/***/****',
			type: "POST",
			params: wj,
			error: (res) => {//后台返回到error里了，我暂时没明白为什么，问了还没回我
				if(res){
					_this.dialogVisible = true;//this的指向发生了改变
					_this.dialogContent = res.showStr;
				}
			}
		});
	}
}

file->formData

var file = arr[1].raw;//获取file对象
let fd = new FormData();
fd.append('file', file, file.name);
httpRequest({
	url: '/api/***/*****',
	params: fd,
	requestDataType: 'multipart/form-data',
	success: (res) => { 
		if(res.code==0){
			
		}
	},
	error: (res) => {
		if(res.code==1){//后台把未审核通过的参数放在了error里
		}
	}
});

说说file->blob对象

先转base64，再转blob
算了，不说了，直接上代码

 var baseData;
 // file-->base64
 var reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = function(){
    baseData = reader.result;
    //base64-->blob
    var byteString;
    if(baseData.split(',')[0].indexOf('base64') >= 0)
      byteString = atob(baseData.split(',')[1]);//base64 解码
    else{
      byteString = unescape(baseData.split(',')[1]);
    }
    var mimeString = baseData.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
    var ia = new Uint8Array(byteString.length);//创建视图
    for(var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    var blob = new Blob([ia], {type:'image/png'});
    blob.lastModifiedDate =new Date();
    var wj = new FormData();
    wj.append("file",blob,blob.name)
    httpRequest({
      url: '/api/*****/*****',
      type: "POST",
      params: wj,
      success: (res) => {
      },
      error: (res) => {
      }
    });
 };