### 实现图片更新功能 为了实现在 Vue 和 Flask 构建的应用中上传和显示图片的功能，需考虑前端与后端两部分的工作。 #### 前端 (Vue) 在 Vue 中处理文件上传通常涉及使用 `<input type="file">` 元素来允许用户选择要上传的文件。一旦选择了文件，则可以通过 `FormData` 对象将其发送到服务器[^2]。 ```html <template> <div id="app"> <!-- File input --> <input type="file" @change="onFileChange"/> <!-- Display image preview --> <img v-if="imageSrc" :src="imageSrc" alt="Preview Image" /> </div> </template> <script> export default { data() { return { selectedImage: null, imageSrc: '' } }, methods: { onFileChange(event) { this.selectedImage = event.target.files[0]; // Create a file reader to generate the base64 string of the image for previewing. let reader = new FileReader(); reader.onloadend = () => { this.imageSrc = reader.result; }; if(this.selectedImage){ reader.readAsDataURL(this.selectedImage); } // Send the file using Axios or fetch API when needed /* const formData = new FormData(); formData.append('file', this.selectedImage); axios.post('/upload-image', formData, { headers: {'Content-Type': 'multipart/form-data'} }) */ } } } </script> ``` 此代码片段展示了如何捕获用户的文件输入，并通过读取器对象创建图像预览。当准备就绪时，可以构建一个 `FormData` 对象并将它传递给服务器接口以完成实际的文件传输操作。 #### 后端 (Flask) 对于接收来自客户端提交的数据，在 Flask 应用程序里设置好相应的路由用于处理 POST 请求中的文件数据是非常重要的。这里假设已经安装好了必要的库如 `flask` 及其扩展包 `werkzeug.utils.secure_filename()` 来安全保存上传来的文件[^1]。 ```python from flask import request, jsonify import os from werkzeug.utils import secure_filename UPLOAD_FOLDER = './uploads' ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg']) def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS @app.route('/upload-image', methods=['POST']) def upload_image(): # Check if the post request has the file part if 'file' not in request.files: resp = jsonify({'message' : "No file part in the request"}) resp.status_code = 400 return resp file = request.files['file'] if file.filename == '': resp = jsonify({'message' : "No file selected for uploading"}) resp.status_code = 400 return resp if file and allowed_file(file.filename): filename = secure_filename(file.filename) try: file.save(os.path.join(UPLOAD_FOLDER, filename)) resp = jsonify({ 'message':'File successfully uploaded', 'filename':filename}) resp.status_code = 201 return resp except Exception as e: print(e) resp = jsonify({"message":str(e)}) resp.status_code=500 return resp else: resp = jsonify({ 'message':"Allowed file types are png,jpg,jpeg", 'status':False}) resp.status_code = 400 return resp ``` 上述 Python 脚本定义了一个 `/upload-image` 接口用来接受 HTTP POST 方法请求携带过来的照片资料；同时实现了基本的安全措施比如验证 MIME 类型以及防止路径遍历攻击等问题的发生。