[Vue3 + TS + Vite] 文件传输下载-组件

经验笔记：文件传输下载-组件

介绍

在 Web 开发中，文件下载是一个常见的功能。通过使用前后端技术，我们可以实现文件的快速、安全和高效传输。本篇经验笔记将介绍如何在 Vue.js + TypeScript + Vite 的前端应用中与 Flask 后端服务配合，实现文件下载功能。

技术栈

• 前端:
  • Vue.js 3
  • TypeScript
  • Vite
• 后端:
  • Python Flask

实现步骤

1. 前端组件:

   • 使用 <button> 触发文件下载。
   • 创建隐藏的 <a> 标签，设置 href 和 download 属性。
   • 模拟点击事件以触发文件下载。

2. 后端服务:

   • 使用 Flask 提供文件下载接口。
   • 检查文件是否存在，如果存在则使用 send_file 函数发送文件。
   • 如果文件不存在，则返回一个错误 JSON。

代码实现

前端 Vue 组件代码

<script lang="ts" setup>
import { ref } from 'vue';

const downloadFile = () => {
  const link = document.createElement('a');
  link.href = 'http://127.0.0.1:5000/download';
  link.download = 'test.mp4';
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
</script>

<template>
  <button @click="downloadFile">下载文件</button>
</template>

后端 Flask 服务代码

from flask import request, send_file
import os
from main import app  
# 注意这里我们直接使用了app变量，假设main模块已经定义好了app

@app.route('/download', methods=["GET"])
def download():
    file_name = 'test.mp4'  # 移除了路径前缀，因为默认在项目根目录
    if os.path.exists(file_name):
        return send_file(file_name, as_attachment=True)
    return jsonify({'error': 'File not found'}), 404

注意事项

• 跨域问题:

  • 确保前端和后端配置了正确的 CORS 设置。
  • 测试阶段可以在 Flask 中启用 CORS 支持。

• 安全性:

  • 验证用户是否有权限下载文件。
  • 对文件路径进行验证，防止路径遍历攻击。

• 性能考虑:

  • 对于大文件，考虑使用流式传输来减少内存占用。
  • 使用适当的缓存策略来加速重复的文件下载请求。

结论

通过上述步骤，你可以轻松地在 Vue.js + TypeScript + Vite 的前端应用中集成 Flask 后端服务，实现文件下载功能。
这种方案不仅简单易行，而且可以根据实际需求进行扩展和优化。