vue img src加载图片二进制问题记录

此 地址请求   http://xx.xx.xx.xx:xxxx/xx/.../xx/downLoadDoc?docId=xxxxx&access_token=xxxxx  返回的png二进制流。如下：

�PNG

IHDR    M
)�l��IDATx���d������d�1����������Ld.3I$�L�$Ɍ$�dL2��%�L�%I"I��L�Ld�I"I��������z�:��>�sv�;����������z�^�׏��ȕ�    G��|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<�?����!��y> ���C���|@����<_5z��ݞ={n߾͡@$�|>|�����Љ������ݽ���Y@y�n޼�������}����ƍu^���^�|������6>>�u����Ÿ'���d�qG��I������K�':thff�sPk����ӧ���z�*�    �����PB"��˗/m�����
ٹs�=���˜&��B��?<��?��������Ç�_-�V�Ժ�۷�}w;hjj�ϭ��_ZZ����|�q����iy���:V###�ǿ�nɶ�������O�����l۶m����|��}�ܩ�)N@�!�����?r�H䟮]�fy��w��������s�N/����dpp�Ǐ;v�x�b������5�D�/�����������i�d����������J��O�>���uvv���������D>�Çz�>ttt��P���MNNNOOG����ö>���={������������p[[��ʊ���;w�~�����G�������W�@m"����떖��?��t��
�[�ny��i���z��˗�?q߾}۶m{��}�񩩩�[����ӧO��������>p�jy�CCCW�\    ?��͛���#>�looO�Y����K�>|������ǫ��������m۶�?�5�<_�������g?~\P�M�Aصkח/_�s��Ẻ���)ۓ�����| ���ϟ---ׯ_/����V@�oW�ϟ?�ܹ�1A�o߾��������'N��E;w�\ggg�s?~����Ғ���_�~�ƍ�O{����aI��[�꿻v��{�n����u�V__߆_��\U�<_�/_�l޼���IxΡC�t�&''��>~�x��ɺ�:���޽{�J�HCC������ח��3��ӧO[B��/�h�������b�:u���-n�܏?���u�^�~���}��ĉ��

 

在项目中我使用img src直接对图片的二进制流加载，遇到频率很高的问题是前端发起的请求被服务器多次302重定向了，然后我访问的资源存在问题。然后果断改为通过http get请求下来png 二进制流来处理。思路是通过responseType  制定返回数据格式为blob

请求的图片地址  url = http://xxxxxx:xxxx/xxx/xxx/merchDoc/downLoadDoc   

axios({

      method: "get",

      url,

      params: xxx,

      responseType:"blob"

  }).then(response => {

        this.picUrl = window.URL.createObjectURL(response);

});

解析blob 并展示在img  src 中如下：

this.picUrl = window.URL.createObjectURL(response);