vue 文件流下载,vue实现文件上传和下载
这篇文章主要为大家详细介绍了某视频剪辑软件实现下载文件流完整前后端代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
使用某视频剪辑软件时,我们前端如何处理后端返回的文件流
首先后端返回流,这里我把流的动作拿出来了,我很多地方要用
/**
* 下载单个文件
*
* @param docId
*/
@GetMapping(/download/{docId} )
公共空的下载(@PathVariable(docId )字符串docId,
响应响应){
outWrite(response,docId);
}
/**
* 输出文件流
* @param响应
* @param docId
*/
私有void out write(http servlet响应响应,字符串docId) {
ServletOutputStream out=null
尝试{
out=响应。获取输出流();
//禁止图像缓存。
response.setHeader(Pragma , no-cache );
回应。设置标题(“缓存控制”、“无缓存”);
回应。设置日期头( Expires ,0);
byte[]bytes=docservice。下载file single(docId);
如果(字节!=null) {
魔术比赛比赛=魔术。getmagic match(字节);
字符串mime类型=匹配。getmime type();
回应。setcontenttype(mime类型);
输出.写入(字节);
}
出去。flush();
} catch(异常e) {
联合伐木工。误差(e);
}最后{
欠条。安静地关闭(出去);
}
}
前端这里我引入了一个组件射流研究…文件下载
新公共管理安装js-文件-下载-保存
然后在某视频剪辑软件文件中添加进来
从" js-文件-下载"导入文件下载
//文档操作列对应事件
async handleCommand(item,data) {
开关(item.key) {
案例"下载":
var RES=等等这个。下载(数据);
返回文件下载(res,data。姓名);
.
默认值:
}
//刷新当前层级的列表
const文件夹=this。getlastfolderpath();
this.listClick(folder.folderId,folder。姓名);
},
//下载
异步下载(第行){
if (this.isFolder(row.type)) {
返回文件夹API。下载(第。id);
}否则{
返回docapi。下载(第。id);
}
},
docAPI js注意需要设置响应类型
/**
* 下载单个文件
* @param {*} id
*/
常量下载=(id)={
退货请求({
url: _DataAPI.download id,
方法:“得到”,
响应类型:“blob”
});
};
这样即可成功下载。
关于vue。j的学习教程,请大家点击专题vue。j组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。