首页 IT技术内容详情

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

2021-09-06 15123 编程艺术家

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

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 ">



作者:时间走了光
链接:https://www.jianshu.com/p/b9bc747df8ae
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


相关标签: # java

文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
 暂无评论,快来抢沙发吧~

发布评论