### 实现 Vue 和 Flask 的图片上传功能 在实现 Vue 和 Flask 的图片上传功能时，可以采用以下方法。前端使用 Vue.js 处理文件选择和上传逻辑，后端使用 Flask 接收文件并保存到服务器上。 #### 前端部分：Vue.js 实现图片上传 前端可以通过 `FormData` 对象将图片数据发送到后端。以下是一个完整的 Vue.js 方法示例： ```javascript methods: { sendimg(e) { // 获取用户选择的文件 this.file = e.target.files[0]; // 创建 FormData 对象，并将文件添加到其中 let formData = new FormData(); formData.append('file', this.file); console.log("发送图片"); // 使用 Axios 发送 POST 请求到后端接口 this.$ajax.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' // 设置请求头为 multipart/form-data } }).then(rsp => { console.log(rsp); }); } } ``` 此代码中，`FormData` 对象用于封装文件数据[^1]，并通过 `Axios` 库发送到后端。注意设置请求头为 `multipart/form-data`，以便后端能够正确解析文件数据。 此外，也可以使用 `element-ui` 的 `<el-upload>` 组件来简化上传逻辑： ```html <el-upload class="upload-demo" ref="upload" action="http://127.0.0.1:5000/upload" // 后端接收上传的 URL :file-list="fileList" :auto-upload="false" :on-success="handleSuccess"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传服务端</el-button> </el-upload> ``` 上述代码展示了如何通过 `element-ui` 的组件实现文件上传[^2]。`action` 属性指定了后端接口地址，`on-success` 回调函数可以在上传成功后执行自定义逻辑。 #### 后端部分：Flask 接收并保存图片 在 Flask 中，可以通过 `request.files` 获取上传的文件，并将其保存到指定路径。以下是一个完整的后端实现： ```python from flask import Flask, request import os app = Flask(__name__) # 定义上传文件的保存路径 UPLOAD_FOLDER = './uploads' if not os.path.exists(UPLOAD_FOLDER): os.makedirs(UPLOAD_FOLDER) @app.route('/upload', methods=['POST']) def upload_file(): if 'file' not in request.files: return "No file part", 400 file = request.files['file'] if file.filename == '': return "No selected file", 400 if file: # 保存文件到指定路径 file.save(os.path.join(UPLOAD_FOLDER, file.filename)) return "File uploaded successfully", 200 if __name__ == '__main__': app.run(debug=True) ``` 在此代码中，`request.files['file']` 用于获取前端上传的文件[^1]。然后，使用 `file.save()` 方法将文件保存到服务器上的指定目录。 --- ### 注意事项 - 确保前端和后端的接口地址一致。 - 在生产环境中，建议对上传的文件类型和大小进行限制，以防止恶意文件上传。 - 如果需要跨域支持，可以在 Flask 中启用 CORS（Cross-Origin Resource Sharing）[^3]。 ---