vue element中axios下载文件（后端Python）

Vue Element中的Axios文件下载实例（Python后端支持）

对于需要在Vue Element中使用Axios进行文件下载的情况，以下是一个具体的实例代码，其中包括前端Axios的请求以及后端Python Flask框架的处理。这个实例具有一定的参考价值，希望能够对大家有所帮助。

一、前端Axios请求

使用Axios进行文件下载时，需要设置{responseType:'arraybuffer'}来接收文件流。以下是具体的请求代码：

```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 && (fileNamedexOf('filename=') !== -1) ? fileName.split('=')[1] : 'download';

require('script-loader!file-saver');

saveAs(blob, title);

}

})

.catch();

```

注：Axios中的response表示服务器响应的数据类型，可以是arraybuffer、blob、document、json、text、stream等，默认为json。

二、后端Python处理

在Python Flask框架中，可以使用send_from_directory函数来发送文件。以下是具体的处理代码：

```python

from flask import send_from_directory

@admin_bp.route('/tasksothers/download', methods=["GET", "POST"])

@auth.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)

response.headers["Aess-Control-Expose-Headers"] = "Content-disposition"

return response

```

注：如果response.header中没有添加Aess-Control-Expose-Headers这个参数，vue中就无法获取content-disposition，因此在前端无法获取到文件名。这个参数代表服务器允许浏览器访问的头（headers）的白名单。

以上就是关于Vue Element中Axios下载文件（后端Python）的实例代码介绍。希望对大家有所帮助，如果有任何疑问，欢迎给我留言。长沙网络推广会及时回复大家的！