加载验证码图片(所有图片使用的是同一个链接)
Image 可以展示从本地缓存、网络甚至是以
'data:'
的 base64 uri 形式提供的图片。
问题描述
后端的同一个链接直接返回一张png格式的图片(使用同
一个链接,刷新后获取到的是不同的图片)
一开始我是在Image里面直接使用uri,但这样需要单独再请求一次获取导后端放在headers里面的验证码code,两次获取图片资源是不一样的。这样Image里面展示的
Tips:由于是通过同一个链接获取图片的,pic和headers里面的具体code不能分开取。应该在获取图片的时候就一并获取headers里面的verifyCode
每次请求我的加了一个时间戳参数,用来获取不同的图片
- 展示图片发起了一个请求
<Image
style={styles.picCodeStyle}
source={{
uri: `http://159.138.148.219:8090/permission/getKaptcha?time=${this.state.picUrl}`,
}}
/>
- 这里保存verifyCode的时候也访问了一次,虽然使用的是一模一样的链接
export const getCodePicRequest = () => {
return (dispatch: any) => {
// 获取当前时间戳
const timestamp = new Date().valueOf();
request
.get(`${FETCH_LOGIN_VERIFY_CODE}?time=${timestamp}`)
.then(res => {
console.log('xxxxxxyyyyyyyy');
console.log(JSON.stringify(res, null, 2));
// 存储当前的时间戳,用于加载不同的验证码图片资源
//dispatch(actions.setCodePicUrl(timestamp + ''));
dispatch(actions.setCodePicUrl(res));
console.log('aaaaaaaassss = ' + res.data);
console.log(res.headers['hello-code']);
dispatch(actions.setLoginCode(res.headers['hello-code']));
})
.catch(err => {
Toast.message('图片资源请求失败:', err.message);
console.log('图片资源请求失败: ', JSON.stringify(err, null, 2));
});
};
};
解决方法
使用的组件依赖
npm install base64-arraybuffer
GitHub:https://github.com/niklasvh/base64-arraybuffer
npm:https://www.npmjs.com/package/base64-arraybuffer
The library encodes and decodes base64 to and from ArrayBuffers
- encode(buffer) - Encodes
ArrayBuffer
into base64 string- decode(str) - Decodes base64 string to
ArrayBuffer
渲染图片的时候,不使用图片链接地址展示图片
而是在用axios发起异步请求时
- 将数据转成ArrayBuffer
- 然后将ArrayBuffer转为base64
- 在Image中使用以
'data:'
的 base64 uri 形式提供的图片
<Image
style={styles.picCodeStyle}
source={{
uri: this.props.codePicUrlViewModel, // 展示的是base64 uri 形式提供的图片
}}
/>
import {encode} from 'base64-arraybuffer';
// 获取图片验证码
export const getCodePicRequest = (timestamp: any) => {
return async (dispatch: any) => {
request
.get(`${FETCH_LOGIN_VERIFY_CODE}?time=${timestamp}`, {
responseType: 'arraybuffer',
})
.then(res => {
dispatch(actions.setLoginCode(res.headers['hello-code'])); // 保存图片对应的验证码数据
const base64Str = 'data:image/jpeg;base64,' + encode(res.data);
dispatch(actions.setCodePicUrl(base64Str)); // 保存base64格式的图片资源
})
.catch(err => {
dispatch(actions.setLoginCode(''));
dispatch(actions.setCodePicUrl(''));
Toast.message('图片资源请求失败:', err.message);
console.log('图片资源请求失败: ', JSON.stringify(err, null, 2));
});
};
};
'data:image/png;base64,'
'data:image/jpeg;base64,'