figo20121231
2020-02-13 16:59
采纳率: 50%
浏览 590

全栈任务:用vuejs和flask写一个下载的组件

各位高手,我有一个比较特别的需求,
我在页面中有个a标签的文件名,用v-model绑定了一个文件id号,链接,点击后下载对应文件(我对应的文件都是以id号命名的)
本人纯业余学习vuejs+flask,只想完成一个公益网站,这个网站对社会很有意义,我之前只会增删改查,遇到这种文件上传下载就纯懵逼,我查了网站很多资料,都没有特别匹配我flask和vuejs。
希望各位多帮忙,帮我写个demo,代码能简单就简单,难的话我也看不懂,希望加注释,包括你大概的思路,用了哪些模块或者组件。
我的微信是15205166002,可以加微信交流在线指导。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • panchenyan0206 2020-02-13 19:17
    已采纳

    前端:
    this.$axios.get('/api/uploads',{responseType: 'blob'}).then(function(res){
    var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
    var contentDisposition = res.headers['content-disposition']; //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
    var patt = new RegExp("filename=([^;]+\.[^\.;]+);*");
    var result = patt.exec(contentDisposition);
    var filename = result[1];
    var downloadElement = document.createElement('a');
    var href = window.URL.createObjectURL(blob); //创建下载的链接
    var reg = /^"["]$/g;
    downloadElement.style.display = 'none';
    downloadElement.href = href;
    downloadElement.download = decodeURI(filename.replace(reg,"$1")); //下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); //点击下载
    document.body.removeChild(downloadElement); //下载完成移除元素
    window.URL.revokeObjectURL(href); //释放掉blob对象
    })

    后端:
    @app.route('/uploads',methods=["GET", "POST"])
    def download2():

    需要知道2个参数, 第1个参数是本地目录的path, 第2个参数是文件名(带扩展名)

    directory = os.path.join(app.root_path,'uploads')
    filename="222.jpg"
    response = make_response(send_from_directory(directory, filename, as_attachment=True))
    response.headers["Content-Disposition"] = "attachment; filename={}".format(filename.encode().decode('latin-1'))
    return response
    
    点赞 评论
  • blownewbee 2020-02-13 17:28
    点赞 评论

相关推荐 更多相似问题