python flask+vue实现前后端图片上传

python flask+vue实现前后端图片上传

vue代码如下：

<template><div><input type="file"  @change="handleFileChange"/><button @click="uploadFile">上传</button><br><img :src="imageUrl" v-if="imageUrl"></div>
</template><script>
import axios from "axios";export default {data() {return {imageUrl: '',};},methods: {handleFileChange(e) {this.file=e.target.files[0];const file = e.target.files[0];const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {this.imageUrl = reader.result;this.uploadImage(file);};},uploadFile() {const formData = new FormData();formData.append('file', this.file);// 发送文件到后端axios.post('http://localhost:5000/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {console.log(response.data);// 在这里你可以处理上传成功的逻辑if ('error' in response.data) {alert(response.data.error);return}// 显示成功消息alert(response.data);}).catch(error => {console.error(error);// 在这里你可以处理上传失败的逻辑// 显示错误消息alert('文件上传失败');});}}
};
</script><style scoped>
/* Add your CSS styles here */
div {margin: 20px;
}input {margin-bottom: 10px;
}button {padding: 10px;background-color: #4caf50;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background-color: #45a049;
}
</style>

flask后端代码如下：

from flask import Flask, request, jsonify
import os
from flask_cors import CORS  # 导入CORS模块# 文件存储的目录
UPLOAD_FOLDER = 'uploads'
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER# 启用CORS
# CORS(app)
CORS(app, resources={r"/*": {"origins": "*"}})  # 允许所有来源# 设置文件上传大小限制为 16 MB
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16 MBdef allowed_file(filename):return '.' in filename and \filename.rsplit('.', 1)[1].lower() in [e-mail]('/')
def index():return 'Hello World!'@app.route('/upload', methods=['POST'])
def upload_file():if 'file' not in request.files:return jsonify({'error': '上传的非图片'})file = request.files['file']if file.filename == '':return jsonify({'error': '没选择图片'})if file and allowed_file(file.filename):print(file)print(file.filename)filename = file.filenamefile.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))return jsonify({'message': '上传图片成功'})else:return jsonify({'error': '无效'})if __name__ == '__main__':app.run(debug=True, host='0.0.0.0', port=5000)

实现效果如下：

然后会在我们后端代码工作目录下保存图片。