【避坑指“难”】前端获取图形验证码

在获取图形验证码的时候，是通过请求后端接口，返回文件流格式，Buffer转成ArrayBuffer后再转成Blob，最后展示成了下图的样子。

方法一

const { setCodeParams, imgStyle, setImgCode } = props
const [codeImgUrl, setCodeImgUrl] = useState('')

const handleImgCode = () => {
    request('/XXX/code', {
      method: 'get',
      responseType: 'blob',
      parseResponse: false
    }).then(async response => {
      const imgtoken = response.headers.get('imagetoken')
      const arrayBuffer = await response.arrayBuffer(response.body)
      const blob = new Blob([arrayBuffer], {type: 'image/jpeg'})
      const qrUrl = window.URL.createObjectURL(blob)
      setCodeImgUrl(qrUrl)
      setCodeParams({ image_token: imgtoken })
    })
  }

<div >
    <Input placeholder="请输入" />
</div>
<div  onClick={handleImgCode}>
	<img src={codeImgUrl} />
</div>

方法二

 const fileOrBlobToDataURL=(obj, cb)=> {
    const a = new FileReader()
    a.readAsDataURL(obj)
    a.onload = function (e) {
        cb(e.target.result)
    }
  }

  function getCode() {
    getImgCode()
    .then(async res => {
      imageToken = res.headers?.imagetoken
      fileOrBlobToDataURL(res.data, (base64) => {
        setImage(base64)
      })
    })
  }