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:''        //临时下载链接
        }
    },

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值