•axios 接受文件流，需要设置 {responseType:’arraybuffer’}
axios.post(
apiUrl,
formdata,
{responseType:'arraybuffer'}
).then(res=> {
if (res.status === 200) {
let blob = new Blob([res.data], {
type: res.headers['content-type']
});
const fileName = res.headers['content-disposition'];
c
在Vue.js应用中，使用Element UI组件库时，与后端进行数据交互通常依赖于axios库。本篇文章将深入探讨如何在Vue Element中利用axios下载文件，后端使用Python Flask框架进行支持。
让我们理解axios在下载文件时的关键设置。在发送请求时，axios允许我们指定`responseType`来决定如何处理服务器返回的数据。对于下载文件，我们需要将`responseType`设置为`'arraybuffer'`，这样axios会接收文件内容作为ArrayBuffer类型的数据。ArrayBuffer是一种低级的数据类型，它存储原始二进制数据，可以用于创建Blob对象，进而用于文件下载。
下面是一个使用axios下载文件的Vue.js代码片段：
```javascript
axios.post(apiUrl, formdata, {
responseType: 'arraybuffer'
}).then(res => {
if (res.status === 200) {
let blob = new Blob([res.data], {
type: res.headers['content-type']
});
const fileName = res.headers['content-disposition'];
const title = fileName && (fileName.indexOf('filename=') !== -1) ?
fileName.split('=')[1] : 'download';
// 引入FileSaver.js库来保存文件
require('script-loader!file-saver');
saveAs(blob, title);
}
}).catch();
```
在这个示例中，我们检查了HTTP状态码是否为200，表明请求成功。然后，我们使用`new Blob()`创建一个Blob对象，其中包含从服务器接收到的ArrayBuffer数据，并根据响应头`content-type`设置文件类型。`content-disposition`头用于获取文件名，如果存在则保存，否则默认为'download'。我们使用FileSaver.js库（通过动态加载`script-loader!file-saver`实现）保存Blob对象到本地。
在后端，使用Python的Flask框架，我们可以创建一个路由来处理文件下载请求。以下是一个示例代码：
```python
from flask import send_from_directory
from flask_login import login_required
@app.route('/tasksothers/download', methods=['GET', 'POST'])
@login_required
def api_tasksothers_download():
root_path = ''
src_name = "a.sql"
upload_path = os.path.join(root_path, src_name)
if os.path.isfile(upload_path):
# 设置响应，允许文件作为附件下载
response = send_from_directory(root_path, src_name, as_attachment=True)
# 添加Access-Control-Expose-Headers，使Vue.js前端能获取content-disposition头
response.headers["Access-Control-Expose-Headers"] = "Content-disposition"
return response
```
这段Python代码中，`send_from_directory`函数用于从指定的目录发送文件。`as_attachment=True`参数确保文件作为附件提供下载。同时，为了使Vue.js能够访问`Content-disposition`头，我们需要在响应头中添加`Access-Control-Expose-Headers`，并将其值设置为`Content-disposition`。
总结一下，Vue Element结合axios下载文件主要涉及以下步骤：
1. 在axios请求中设置`responseType: 'arraybuffer'`，以接收文件内容。
2. 使用`Blob`对象构造文件，根据`content-type`设置文件类型。
3. 从`content-disposition`头中提取文件名，或者使用默认值。
4. 使用FileSaver.js库保存Blob对象到本地。
5. 后端使用Flask的`send_from_directory`发送文件，设置`as_attachment=True`和`Access-Control-Expose-Headers`。
这个流程适用于跨域请求，确保前端可以正确获取并保存文件。如果你在实际应用中遇到问题，记得检查网络请求和响应头，确保所有必要信息都已正确设置。
