### 实现文件上传功能 为了实现前端Vue.js与后端Python Flask之间的文件上传交互，可以按照如下方式设计： #### 前端部分 (Vue.js) 在Vue.js中，`el-upload`组件提供了便捷的方式用于处理文件上传操作[^2]。此组件允许用户选择本地文件并通过HTTP请求将其提交给服务器。 下面是一个简单的例子展示如何配置`el-upload`以适应特定需求: ```html <template> <div id="app"> <!-- el-upload 组件 --> <el-upload class="upload-demo" action="/api/upload" <!-- 这里应设置为实际的API路径 --> :on-success="handleSuccess" :before-upload="beforeUpload" multiple> <el-button type="primary">点击上传</el-button> </el-upload> <ul v-if="files.length"> <li v-for="(file, index) in files" :key="index">{{ file.name }}</li> </ul> </div> </template> <script> export default { data() { return { files: [] }; }, methods: { handleSuccess(response, file) { this.files.push({ name: response.filename }); }, beforeUpload(file) { const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('上传文件大小不能超过 2MB!'); } return isLt2M; } } }; </script> ``` 这段代码创建了一个带有按钮的表单，当用户点击该按钮时可以选择要上传的一个或多个文件。一旦选择了文件，则会自动触发向指定URL (`/api/upload`) 发送POST请求的过程。成功响应之后，将会更新视图中的列表显示已上传文件的名字。 #### 后端部分 (Flask) 对于接收来自客户端的文件，在Flask应用程序中可以通过定义路由来处理这些请求。这里给出一个基本的例子说明怎样编写这样一个接口: ```python from flask import request, jsonify import os from werkzeug.utils import secure_filename UPLOAD_FOLDER = './uploads' ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'} def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS @app.route('/api/upload', methods=['POST']) def upload_file(): # 检查是否有文件被上传 if 'file' not in request.files: resp = {"error": "No file part"} return jsonify(resp), 400 file = request.files['file'] # 如果用户没有选择任何文件，浏览器也会提交一个空的部分而不引发错误 if file.filename == '': resp = {"error": "No selected file"} return jsonify(resp), 400 if file and allowed_file(file.filename): filename = secure_filename(file.filename) filepath = os.path.join(UPLOAD_FOLDER, filename) try: file.save(filepath) # 使用 pandas 库读取文件内容并执行相应业务逻辑... resp = {"filename": filename} return jsonify(resp), 200 except Exception as e: resp = {"error": str(e)} return jsonify(resp), 500 else: resp = {"error": "File extension not allowed"} return jsonify(resp), 400 ``` 上述脚本实现了对传入文件的安全保存机制，并返回JSON格式的结果告知前端关于此次上传的状态信息。注意这里的`UPLOAD_FOLDER`变量应该指向一个有效的目录位置以便存储接收到的文件。