前端上传和下载文件时遇到的问题总结

概要：项目中有时需要下载文件比如word或pdf时，一般是直接点击一个链接就可以直接下载，这一般是文件流的下载方式，但是有个缺点就是只要拿到这个文件流地址，在什么地方都可以直接下载，安全性不好，此时需要带上token进行验证，通过一个请求带上其token，然后把返回值进行文件流下载即可。我在做项目时，就遇到了这种情况，附件下载头部需要添加token。以下几个问题是我在做项目时上传附件以及下载附件时遇到的问题，以及总结的解决方法。

问题1：附件下载，如何需要通过请求，添加token校验？

解决方法：针对这一问题，经过不断的实验，总结了一下，可以使用blob对象来接收文件流，原因是后台网关校验通过请求头拿token，原来的操作无法实现。首先将请求配置中的responseType（服务器 相应的数据类型）设置为‘blob’。

代码片段如图1所示：

问题2：只有当这个全部下载完成后，浏览器才会显示下载的附件，尤其是下载大文件时，会出现点击下载后短时间内页面无反应。

解决方法：由于附件是通过接口请求的方式下载，而不是a标签，所以只有接口下载完数据后，才能在浏览器看到下载的效果。为了解决这个问题，通过创建加载框来提高交互效果。代码如图1所示。

问题3：在谷歌浏览器可以正常下载，而在IE浏览器下载不了。

解决方法：这个问题属于浏览器的兼容性问题，在代码里添加判断是否为IE浏览器，若是则执行相应的操作，代码在图1所示。

问题4：上传组件点击按钮后会直接弹出文件框，如果在这中间文件框弹出之前想要进行提示或者进行其他操作该怎么办？

解决方法：由于upload中的button按钮点击会直接弹出文件选择框，所以可以将按钮放在外面进行模拟上传按钮，提示或操作完成后在触发上传，弹出文件选择框继续上传即可。代码片段如图2所示。这里把上传按钮放在上传组件外面，其实不属于上传组件了，upload组件内不再需要按钮。