vue axios请求图片流文件对应的前端展示方法

在做用户管理过程中，后台人员提供的是文件流，取到的文件流有时候是乱码，此时的相应操作；

1、axios的请求

我们使用token验证，所以请求头里面要加token信息
注意，这个responseType一定要是arraybuffer/blob的

let downLoadFile = function (url) {
    // config.headers['Authorization'] = token.tokenHead + ' ' + token.token;
    return new Promise(function (resolve, reject) {
        axios.get(url, {
            responseType: 'arraybuffer', // 或者responseType: 'blob'
            // xsrfHeaderName: 'Authorization',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': token.tokenHead + ' ' + token.token
            }
        }).then(res => {
            if (res.status === 200) {
                resolve(res.data);
            } else {
                reject('***请求出错***')
            }
        })
    // }).then(function (r) {
    //     console.log('Done:', r);
    }).catch(function (reason) {
        console.log('Failed:', reason);
    })
    
}

2、返回结果处理

downLoadFile('/admin-provider/user/getUserPicById/' + datas.userId).then(data => {
                     this.fileField = 'data:image/png;base64,' + btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
                 })

3、页面操作

<img :src="fileField ">