问题
普通img标签+src的加载图片模式在加载头像的时候会遇到一个问题。当在类似个人中心页面上传新头像后，因为图片缓存机制（URL没有变直接使用本地缓存）的原因，页面顶部的用户头像并不会更新成新的图片，所以需要手动刷新浏览器的缓存。
解决
正确设置axios请求头
由于使用的Ajax库是axios，所以第一步查阅axios相关文档。普通img加载的图片使用二进制方式，需要在axios中设置responseType: 'arraybuffer'，同时因为需要强制刷新缓存需要添加headers: { 'Cache-Control': 'no-cache' }。
{
responseType: 'arraybuffer',
headers: { 'Cache-Control': 'no-cache' },
}
正确接收图片信息
既然已经实现了强制无视缓存获取图片信息，那么就可以在上传头像页面加载头像时保证不会加载到被缓存的头像（自己想到的场景是用户在A设备里上传了新头像，B设备并不知道只有到缓存到期了才能正确加载）。根据文档，加载的二进制数组会塞进data中返回。img是无法直接加载二进制数组的，需要转换成base64字符串。此时可以使用FileReader和Blob把获取到的二进制数组转换成base64字符串。
const { data } = await this.userService.getAvatar({ userId: this.user.user_id });
const reader = new FileReader();
reader.onload = (event) => {
this.avatar = event.target.result;
};
reader.readAsDataURL(new Blob([data]));
成功加载头像后刷新页面，所有的头像图片就加载到新上传的资源了。
window.location.reload();
