接口直接返回图片或者base64位数据,前端获取处理展示为图片!!

一、接口返回base64位数据,前端处理展示成图片。

<img src={`data:image/png;base64, ${base64数据}`} alt="" />

 

二、接口直接返回图片,前端处理成base64位数据,并进行数据展示

axios

import axios, { Method } from 'axios';

 const instance = axios.create({});


const axiosApi = (method: Method, url: string, params: any, flag?: number) =>
  new Promise((resolve, reject) => {
    instance({
      method,
      url,
      data: params,
      responseType: 'arraybuffer',
      withCredentials: false,
    })
    .then((response: { data: Iterable<number> }) => `data:image/png;base64,${btoa(
      new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
    )}`
   )
   .then((response: any) => {
      resolve(response);
   })
   .catch((err) => {
    reject(err.response);
   });
   })
  }
 
const post = (url: string, params: any) => axiosApi('POST', url, params);

 引用

import React, { useEffect, useState } from 'react';
import { post } from 'axios';
const [imgUrl, setImgUrl] = useState<string>();

const getImgUrl = async () => {
  try {
    const res = await post({xxx});
    setImgUrl(res);
  } catch(error) {
    console.error(error);
  }
}

useEffect(() => {
  getImgUrl();
}, [])

<img src={imgUrl} alt="" />
ps: 此时imgUrl值为 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAsCAIAAAAhGetkAAAJYklEQVR4nOxbe1BU1xk/997du8vuwhIX5LWIGFAUUWk0vrCKQn3gO2DTmjQzZqaTxJS01UaaWl+h7bSMr2naTpPWTqdTY6aFBK0vCqKCKEREBUSRNwiyiLAv9n1vZjnrcrl7d/feZb2ahN/wx7fnfPud7/z23O9+3zkHAUmSYBxPH+izduDbgnGiecI40TxhnGieME40TxgnmieMEL1kIrZkInb8ozwAQH9vz5EP3stMnrw0XJgxLXTXa+uvXyp+pn7yirt3Xq8oC6koC+lT/YfW1af6DHbda3iDk03EmUcvmYgBANZu3bZ52/afZqZrBh7TVH+4fefbe38/tinY0WupG7sRiDDhTH+ZosJs7qmpXmSzakWiyOS5lSgaANsJQn/j+nyz6aFAEJT80lUhHsbeJp3oKQmJeq1G1d2Vsmr99OR5JEneulZWVVoEdXYd/mTt1m1c/fYjs57hR94f9vytpSkHABA9aWd0TA5s7GjL7eo8AgB4Mf5QWPiPOBmkEw0AwDAs79PT85alO5UK/v6nw7/MBgAEK0Lya9pxsdirXd7IdQdIum2gWl2yALZMyLRwMUDW3lqj1XyJouLvzKvC8UiTqbPm+nyCMMuDFycmFXL1R+DalLF1G5VlAMDmN7cXf36itqpisP9R+flTyzdkuTPHhl8/rjsPw8EuxNrMMENWQOLij9yqWUYQxvbWffHTPm5v3UcQZhQVvRh/2AdzDG6kbXrVtXH5hi21VRUAgMoL51yJ9szvU4qkrpb9+xgFSKZFKn/S1XGoT1Ugkcx41FcII4lYPMUHawxExyXOdm2c8dJ8KDTfue1s9DCxp0euB1AHdfXN2cLet+hJO/r7Cg2G5va2XACAVJYYFZ3tm290ogUCQWDwC656YVGToKDq7nre+GWEI0YLTGqXLvaMI4hoSlxefe1m+HFK3EEAMN/8oRMtCpAw6klkMiho1QOuvc8Pv5wAGffsvE5bTZFvBAbO9W0sOtE2m5XRoSGjFsooOlLjfL34dXpLeyI9LHCTqbOz4+Dwgy63WtUd7b8LCdnAKX12gk60yWAgSRJBEJoTBv0QFAJkUjb8qh7r4tbnwtxRLgtoO7NHgHkp980WW2zGAY3eOJxiovcLd4e+IPVhSl7hmXHq7FqbPyAII4bJkmafuX0z3WbVtrX+On7axz4MSp88SZL9vT29ljr452xXdTyAQkRULBu7EyfIFs9xaKp1hsvVzV6/Ulx5D7IMAFg2N44Dy4TReP+opjRloFAxkC8aPBWpu/aq9VHZ8PxwD98LE850XTTOuQ8OFD/uPwsAiFJut2cgUe8Ml+AF6sHLbB2jgGGVXbue7+rQg5qHUI6byZCTMCIzbUTz89LbXvULSkZ0stLmsByF0DaozycN3dpp7a8kLRqSJAhTn7krX3Nx+dDN9xBhkFcLkG4a4yRpvt/0MwAAjodGKrcP0/2uUKgAALQ0v0+SnGofwEx0+RdnaU4AAIr++2/YsjBtDUvTG1NnYU/Cxf8u1xOEp8NJs8V2uvwOlHGhYN3SRDZDkMZuzcUVNn0b/IhJY/HI9XjEGkwaAwAwNv3Z2PBblt7SFvjgg+MWY4897kVt7bO12JnCZMpJO+xRdKipu+sj9mYhHERQo8SVk+dvn6qljvqPvAMtDXYFRVj4wvQMlqYVcsmyuXFQfjSoL6tp8aBcdPWubsgE5ZWLEoKk3qt8AIC+Jpsw9dnzMEwkW3BCvrpRtihftrhQvropMOUUik8wth5j6a0TYcKZwbbAwe5PAQBCsTIobJ0znoRHbBOL7T9hZ8dBk6mTk1n6ig5XTgpWhBx467WfZ608lrf/n4d+k71p+bG8/bD3nb1/EOKeoh4N1AjwRWmtB82CCyNxY0s6q7hB6BrNDxx7DpLZB3HlK9ReYfgq2cLP2LtKRUtzDkHYf/XYyXupibPKelce/frwNp6xtTmHk03HplKvpS4zyh5SY+ITdh3+5Bc/yNBrNaP0EOSNHbvffH8fJ+savTE240OzxQpfj00ndzvzGSrMFlvMmv1wRcskotbTe8S49y0KY0PuUL19BaDi8OCMNoAwlBLai6mWR+VQ5ripNAqMNRqn7BalfUerHkh6edG/yuuyfpwdGRMrxHFFWPjSjE1HC4q5sgwACJKK0xdMg7Lqsa7iVhujGjVuZKTMYMMyAMDaXwkFYfhKRpYdXf6Ah/yEpQX6lMxGe4IVGhGVnXs4O9eXbSoaNq+YdbqsHsonL9U5cz4qRsWN7yWztGzTOMxi8iR3OljgVI7+egJjAs6yoGfIo/3omWOFioRQPnmJ4fc3mq1nnuQbCrl0xcvxLC0T5n4ooOIIdzoIruDusnf4sMCf+uGsNABfuTAByl29g9UN9Jd10dW7eoMZyhtSkzBvBaQTpNUABQQVutNBBMxbN36B53qH1s7HKfioyuUCPfegZiNUTa9ABI6jPJJw+5YjCYatG/+Csd5xXeB8EL1q8XSZRARlWpJHjRuRofIUpgjuDgg+AQrkkxjiCg9dfodnuvkgWowLMlJmQLm95/Htxm5nV/G1e864kZk2mzH5cwcs0BGRbJo77nRs2kZfvfYR7hY4TxdoMik1iLPUtr8eL9eP6HCJG/aESeE4dbX0FrnTsahKOHrqN9Do5onotPlTgwMdIfXslQYoEARZVHEXylOUiuQEJSeboujvQ8GmazF3nnBVsA3esDz8/9gcHyucdI8QXaaylals55oZDlDGDgGGrv2uY5/o5r0HfQN6AEBVfUe/Wg8bs9iV3VSggQl45Foo66vfsnSPugJg7b+ivbIRgOflmj1/d+9eWeGIDCRJllQ1wg1oZ++WdLZ1ChWS5D+iopDhVE+vrchUn52qu7JRV75OfS5BU7qMMPRIEvchqK8XDvwK/ohOnRunkDv28ksqG4czaAfRSXERU2NCfbCJBigDl5Zg0snwo03fau45bX54zqZrBgAJmJ4jnv4rVOrL7QC/gz+iMQzdkOqolUu/vD+gNdy85zi1yWS9zc9gNmiGfGWddM4hYUgKKgpBUAEaECWKzgpKvRiQ+CFU8NMMxgSEz38WKqtpWfPuX6F84O3Ve/5yFu4L3snPUYYF8+bGMwGv96NT5sSGhzjOlo4ed5y8zZ8Z841nmW+iEQTZvHwWlJ35RmY6t/T5awq+b/zTqhIURTc9of6bDV5j9LcZ4//DwhPGieYJXwUAAP//L3Sranj9aUcAAAAASUVORK5CYII= 
 

 

posted @ 2020-11-05 17:29  凹润之之之  阅读(3382)  评论(0编辑  收藏  举报