CV工程师
2022-12-09 08:55:19 阅读:461
最近有在开发一个文件转换工具,暂时保密,类似于将png转换成png的工具。但并非是图片转换,而是文件转换,因此需要向服务器上传文件,服务器接收到后直接转换然后返回转换后的文件流。
上传文件基本上就是post请求了,流程大概就是:
接下来肯定是遇到了问题。
post请求如果成功还好,浏览器会直接弹出下载;如果失败则会整个页面进入到post请求的报错界面,虽然可以优化,例如可以将错误界面直接重定向,但是效果不好。
我思考了几个解决方案:
target="_blank"
在查找相关资料后放弃了,似乎并不能实现此类效果。
方案二还算可以,整个流程我都非常满意,然而不知道什么原因导致弹出下载很慢很慢,实际上用普通的post请求速度并没有这么慢,此时做笔记时才想起要打印一下日志,看看卡在哪里的。当时出现这个问题后自认为是blob太大导致的浏览器反应慢。
方案三关键的一点是如何控制iframe发送post请求,经过简单的学习之后,了解到可以使用postMessage
:
iframe.contentWindow.postMessage({
cmd: 'download',
params: {
"url": "",
}
}, '*')
其中iframe是iframe的dom元素,命令是download,参数是url,其实本来还有另外一个参数的:inputFile,但是我遇到一个问题,当input类型是file的时候,对代码来说,input是只读的,只能通过浏览器选择文件为其赋值,否则是无法赋值的。因此,我决定将选择文件的input放在iframe内,既:在iframe内选择文件,在外面点击button发送iframe内的post请求,以此实现下载的目的,经过实践是没有问题的,iframe内的js代码如下:
window.addEventListener("message", function (event) {
var data = event.data;
form.value.action = data.params.url + "/"+ fileName.value.substring(0, fileName.value.lastIndexOf("."))
console.log(data);
switch (data.cmd) {
case 'download':
console.log();
// 处理业务逻辑
form.value.submit()
break;
}
});
这个方案本来感觉挺好的,能够实现我要的效果,然而意外发生了:手机端无法下载
最后我放弃了,不再使用这样的方式实现文件转换,而是:
https://xxx.xxx.com/download/{id}
,并且设置target为_blank
具体实践起来要比这个步骤多一丢丢,等做完后再记录一下笔记。评论