### 实现基于 Vue3 和 Flask 的视频文件上传功能 要实现基于 Vue3 前端和 Flask 后端的视频文件上传功能，可以按照以下方式设计架构并编写代码。 #### 1. **Flask 后端配置** 在 Flask 中创建一个 API 接口用于接收前端传来的视频文件，并保存到服务器指定目录下。以下是完整的 Flask 路由逻辑： ```python from flask import Flask, request, jsonify import os app = Flask(__name__) UPLOAD_FOLDER = './uploads' if not os.path.exists(UPLOAD_FOLDER): os.makedirs(UPLOAD_FOLDER) @app.route('/api/video/upload', methods=['POST']) def upload_video(): if 'file' not in request.files: return jsonify({'error': 'No file part'}), 400 file = request.files['file'] if file.filename == '': return jsonify({'error': 'No selected file'}), 400 save_path = os.path.join(UPLOAD_FOLDER, file.filename) file.save(save_path) return jsonify({ 'message': 'File uploaded successfully', 'path': save_path }), 200 ``` 上述代码实现了基本的文件上传功能[^2]，并将文件存储至 `./uploads` 文件夹中。 --- #### 2. **Vue3 前端配置** 在 Vue3 中可以通过 `<input type="file">` 或者拖拽的方式捕获用户选择的视频文件，并将其发送给后端接口。以下是具体的实现方法： ##### (a) HTML 结构 ```html <template> <div> <h3>Video Upload</h3> <input type="file" accept="video/*" @change="handleFileChange" /> <button @click="uploadVideo">Upload Video</button> </div> </template> ``` ##### (b) JavaScript 方法 ```javascript <script setup> import axios from 'axios'; let videoFile; const handleFileChange = (event) => { const files = event.target.files; if (files && files.length > 0) { videoFile = files[0]; } }; const uploadVideo = async () => { if (!videoFile) { alert('Please select a video file'); return; } const formData = new FormData(); formData.append('file', videoFile); try { await axios.post('http://localhost:5000/api/video/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); alert('Video uploaded successfully!'); } catch (err) { console.error(err); alert('Failed to upload the video.'); } }; </script> ``` 此部分代码展示了如何通过事件监听器捕获用户选择的文件，并利用 Axios 将其作为表单数据提交给后端[^3]。 --- #### 3. **跨域问题解决方案** 由于前后端分离开发模式可能导致跨域问题，在 Flask 中需启用 CORS 支持。安装 `flask-cors` 并修改应用初始化代码如下： ```python from flask_cors import CORS CORS(app, resources={r"/api/*": {"origins": "*"}}) ``` 这一步确保了任何来源都可以访问 `/api/` 下的相关路由[^4]。 --- #### 4. **运行环境准备** - 确保 Python 已正确安装，并能够启动 Flask 应用。 - 使用 Node.js 初始化 Vue3 项目，并安装必要的依赖库（如 Axios）。 - 配置好本地开发环境后分别运行 Flask (`flask run`) 和 Vue 开发服务器 (`npm run serve`)。 --- ### 总结 以上方案涵盖了从前端文件选择、传输到后端接收处理以及可能遇到的跨域问题解决办法。整个流程清晰明了，适合初学者快速上手实践。