最近cms项目需要读取文件返回前端，一般来说前端只要应用接口返回参去只显示即可
但是新同事向我提问：“接口返回乱码怎么办”。我过去一看居然是直接读取返回，如下
```����JFIF��C ! "$" $ ��C �� @"�� ��Z!1A"Qaq2�#B����3 Rb�$r�4C��%Sc����5s�&6 d��'DT�� t��7EU������61!A2"Qaq3B����#RC��b�4���� ?���� 4-�֨�s��ii��9����L�1Ǻ�8e�Q�D3� wMt�S�j1Ym�����
N��f��G� ��ɍ���=��(�lj��+��v�R�5R�iE>\|Λ�>u�&�q^��U�9bۄ�s�_~ >Fya�rſ���>Y�U��-�Qތ� zn�5��i V��J$�ƫKU��Ջ]��X�M C� ��ne��r� .����_v����_Z���S�_�����]�P����5*T��>�� CL��M�;��h�+�<����ݷ /Ya����h��Z��&����� 3>�6�E/�3C=[R��b�E��ܩǽ��y��2Qqn-4�Fcy���r������4nv���En�Y���|7��6�]w�����V��S��L �4�e˞]�� 8��p�� m�3S��
我第一反应是让后端返回oss文件垃圾桶的url，但是这Java后端拒绝了，表示他不会。没办法搞了一圈只能先前端处理。
首先前端对二进制只有一个ArrayBuffer可以很好的处理二进制，所以接收接口响应需要进行ArrayBuffer响应以原生xhr.response为例例如：
let xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
随后使用JavaScript 文件对象Fileurl或者转base64链接都可以
文件URL对象
let file = new File([xhr.response], '1.png', {type:'image/png'})
let imgurl = window.URL.createObjectURL(file)
所生成链接URL对象放到img标签即可,background-image: url是不能用的，用了会显示空白
所以就会用到 String对象里fromCharCode方法解码
fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。更多fromCharCode内容可在掘金老哥文章里查找
转base64
首先转base64一样也要转码需要Uint8Array方法用fromCharCode解码及btoa创建一个base64编码的字符串
转Uint8数组，reduce累加解码值
let baseTest = new Uint8Array(xhr.response)
baseTest.reduce((initValue, nowValue) => data + String.fromCharCode(nowValue), '')
let baseUrl = window.btoa(baseTest)
得到的baseUrl可用于img标签可标签背景图
就当我以为没事了时新的幺蛾子又双叒叕出来了接口连报警信息和备忘录文件都是直接读取返回的
字符串处理
前面用fromCharCode解码图片很好用其实文字也可以的，上代码
let txtUint8 = new Uint8Array(xhr.response)
let test = txtUint8.reduce((initValue, nowValue) => {
return data + String.fromCharCode(nowValue)
}, '')
得到的test就是接口读到的文字
对于不同协议编码可根据协议处理，上述文章只对普通直返做处理
