el-upload 上传文件之后 实现文件流下载
el-upload 上传文件之后 实现文件流下载通过on-preview 的参数获取当前点击文件的参数 ,并调用接口 返回文件流 通过Blob对象 实现文件流下载文件这样下载的文件会有问题,会造成文件的格式不对,是因为下载的时候没有指定下载的文件类型想要下载所有类型的文件,直接在请求的时候(axios)加上 responseType: 'blob' 就可以了...
·
想要下载文件列表的文件 需要在el-upload 上绑定 on-preview 属性
<el-upload :action='upUrl' :data='upData' :headers="upheaders" :on-preview='dowloadFile' :show-file-list="true" :on-success="handleAvatarSuccess" :before-remove="beforeRemove" :file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
通过on-preview 的参数获取当前点击文件的参数 ,并调用接口 返回文件流 通过Blob对象 实现文件流下载文件
dowloadFile(file) {
downFile({
filePath:file.url
fileName:file.name
}).then(res => {
let blob = new Blob([res]);
// 获取heads中的filename文件名
let downloadElement = document.createElement('a');
// 创建下载的链接
let href = window.URL.createObjectURL(blob);
downloadElement.href = href;
// 下载后文件名
downloadElement.download = fileName;
document.body.appendChild(downloadElement);
// 点击下载
downloadElement.click();
// 下载完成移除元素
document.body.removeChild(downloadElement);
// 释放掉blob对象
window.URL.revokeObjectURL(href);
})
},
这样下载的文件会有问题,会造成文件的格式不对,是因为下载的时候没有指定下载的文件类型
想要下载所有类型的文件,直接在请求的时候(axios)加上 responseType: 'blob' 就可以了
export function downFile(data) {
return request({
url: '/xxxx/xxx ',
method: 'post',
data,
responseType: 'blob'
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)