flask后端+vue前端——后端怎么发文件给前端?
首先,前端axios请求的responseType要设置为blob
const service = axios.create({
baseURL: 'http://127.0.0.1/api',
timeout: 5000
});
//向后端发送数据,后端根据这个数据data生成文件返回
send_coordinate(data){
return service.post('/',data,{responseType: 'blob'});
}
然后,后端要返回文件字节流
from flask import Flask,Response
@app.route('/', methods=['POST'])
def coordinate():
res = request.form['data'] # 取前端数据
# 保存为txt文件
with open("1.txt", 'w', encoding='utf-8') as f:
f.write(data)
# 以字节方式读取
with open(filename, 'rb') as f:
bytes_data = f.read()
# 用Response对象构造返回值,需要指定文件类型
return Response(bytes_data, mimetype="text/plain")
接着,前端在axios的then中,把res.data转为Blob对象,然后创建URL,赋值给a标签的href属性
user.send_coordinate(formData)
.then(res=>{
let blob = new Blob([res.data], {type: 'text/plain'}); //这一步是关键
this.downloadURL=URL.createObjectURL(blob) // 生成临时URL,赋值给变量
this.filedownload=true // 标记变量,显示a标签(下载链接)
})
最后,a标签与vue变量如下
<a v-if="filedownload" :href="downloadURL" download="coordinate.txt">下载轨迹文件</a>
export default {
name: 'PickTrack',
data() {
return {
filedownload:false, //是否有文件可下载
downloadURL:'' //临时下载链接
}
},
原文地址:https://blog.csdn.net/atregret/article/details/140700916
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!