在获取图形验证码的时候,是通过请求后端接口,返回文件流格式,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)
})
})
}