当前位置: 首页 > news >正文

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 ALLOWED_EXTENSIONS@app.route('/')
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)

实现效果如下:在这里插入图片描述

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

相关文章:

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

python flaskvue实现前后端图片上传 vue代码如下&#xff1a; <template><div><input type"file" change"handleFileChange"/><button click"uploadFile">上传</button><br><img :src"imageUrl&…...

centos7安装开源日志系统graylog5.1.2

安装包链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1Zl5s7x1zMWpuKfaePy0gPg?pwd1eup 提取码&#xff1a;1eup 这里采用的shell脚本安装&#xff0c;脚本如下&#xff1a; 先使用命令产生2个参数代入到脚本中&#xff1a; 使用pwgen生成password_secret密码 …...

5G+云渲染技术:将如何快速推进XR和元宇宙?

XR&#xff08;扩展现实&#xff09;领域正在以惊人的速度增长。目前&#xff0c;到 2024 年&#xff0c;一些专家表示这个行业的价值将达到 3000 亿美元。 这个行业发展如此迅速的部分原因是 XR 将在商业环境中的带来巨大利益。近年来&#xff0c;很多企业遇到了将增强现实和…...

【leetcode234】回文链表Java代码讲解

12.21 234. 回文链表 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&a…...

指标体系构建-02-从0开始,梳理数据指标体系

指标体系构建-02-从0开始&#xff0c;梳理数据指标体系 一个例子&#xff0c;看懂并列式指标梳理 并列式指标体系&#xff0c;一般用于&#xff1a;描述个体情况 当我们想从几个不同角度&#xff0c;描述问题的时候&#xff0c;就需要并列关系 举个栗子&#x1f330;&#xf…...

高速视频采集卡设计方案:620-基于PCIe的高速视频采集卡

一、产品概述 基于PCIe的高速视频采集卡&#xff0c;通过PCIe3.0X8传输到存储计算服务器&#xff0c;实现信号的分析、存储。 北京太速科技 产品固化FPGA逻辑&#xff0c;适配视频连续采集&#xff0c;缓存容量2GB&#xff0c;开源的PCIe QT客户端软件&#xff0c…...

MyBatis:动态 SQL 标签

MyBatis 动态 SQL 标签if 标签where 标签trim 标签choose 、when 、otherwise 标签foreach 标签附 动态 SQL 标签 MyBatis 动态 SQL 标签&#xff0c;是一组预定义的标签&#xff0c;用于构建动态的 SQL 语句&#xff0c;允许在 SQL 语句中使用条件、循环和迭代等逻辑。通过使…...

福建农林大学 html +css + JavaScript 期末复习 -- 保姆级

html css JavaScript 期末复习&#xff08;保姆级复盘&#xff09; 考试题型 1、选择题 20题 30分 2、判断题 15题 15分 3、程序题 3 题 30分 4、综合题 2 题 25分 1、网页第一代文本标签&#xff08;直接上代码&#xff0c;看保姆级注解&#xff09; <!-- doctype: docum…...

推箱子小游戏

--print("开发流程步骤&#xff1a;I、绘制推箱子地图并初始化 ----- 几*几大小的地图 \n\n II、根据宏定义和推箱子地图上的数字来选择不同的图形\n\n III、获取玩家坐标 -----------重点\n\n …...

Spring简介

一&#xff1a;Spring是什么 Spring是分层的Java SE/EE应用full-stack&#xff08;各层都有对应解决方案&#xff09;轻量级&#xff08;api较少&#xff0c;学习成本较低&#xff09;开源框架&#xff0c;以IOC&#xff08;Inverse Of Control:反转控制&#xff09;和AOP(Asp…...

万德高科携手航天科技AIRIOT打造智慧能碳管理平台, 助力碳达峰碳中和

“十四五”时期&#xff0c;我国生态文明建设进入了以降碳为重点战略方向、推动减污降碳协同增效、促进经济社会发展全面绿色转型、实现生态环境质量改善由量变到质变的关键时期。“实施数字化赋能行动”&#xff0c;聚焦能源管理、节能降碳、低碳能力等典型场景&#xff0c;推…...

金融软件开发的 4 大挑战

与大多数行业一样&#xff0c;金融行业不断发展&#xff0c;同样给软件和解决方案开发带来了挑战。虽然这些挑战并不独特&#xff0c;也不新颖&#xff0c;但是随着时间的推移&#xff0c;金融体系越来越复杂&#xff0c;这些挑战的影响也越来越大。 在上一篇文章中&#xff0…...

oppo 手机刷机流程

一、操作步骤&#xff1a; 一&#xff09;解锁BootLoader 以下是一种常见的方法&#xff0c;可以尝试获取OPPO手机的Root权限&#xff08;以参考信息为准&#xff0c;具体步骤可能因设备型号和系统版本而有所不同&#xff09;&#xff1a; 11). 解锁Bootloader&#xff1a;首…...

SQL---数据抽样

内容导航 类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统…...

C 库函数 - strxfrm()

描述 C 库函数 size_t strxfrm(char *dest, const char *src, size_t n) 根据程序当前的区域选项中的 LC_COLLATE 来转换字符串 src 的前 n 个字符&#xff0c;并把它们放置在字符串 dest 中。 声明 下面是 strxfrm() 函数的声明。 size_t strxfrm(char *dest, const char …...

选型前必看,CRM系统在线演示为什么重要?

在CRM挑选环节中&#xff0c;假如企业需要深入了解CRM管理系统的功能和功能&#xff0c;就需要CRM厂商提供在线演示。简单的说&#xff0c;就是按照企业的需要&#xff0c;检测怎样通过CRM进行。如今我们来谈谈CRM在线演示的作用。 在线演示 1、了解CRM情况 熟悉系统功能&…...

微软官宣放出一个「小模型」,仅2.7B参数,击败Llama2和Gemini Nano 2

就在前一阵谷歌深夜炸弹直接对标 GPT-4 放出 Gemini 之后&#xff0c;微软这两天也紧锣密鼓进行了一系列动作。尽管时间日趋圣诞假期&#xff0c;但是两家巨头硬碰硬的军备竞赛丝毫没有停止的意思。 就在昨日&#xff0c;微软官宣放出一个“小模型” Phi-2&#xff0c;这个 Ph…...

成为一名FPGA工程师:面试题与经验分享

在现代科技领域&#xff0c;随着数字电子技术的迅猛发展&#xff0c;FPGA&#xff08;可编程逻辑器件&#xff09;工程师成为了备受瞩目的职业之一。FPGA工程师不仅需要掌握硬件设计的基本原理&#xff0c;还需要具备良好的编程能力和解决问题的实践经验。面对如此竞争激烈的行…...

关于“Python”的核心知识点整理大全35

目录 13.3.4 重构 create_fleet() game_functions.py 13.3.5 添加行 game_functions.py alien_invasion.py 13.4 让外星人群移动 13.4.1 向右移动外星人 settings.py alien.py alien_invasion.py game_functions.py 13.4.2 创建表示外星人移动方向的设置 13.4.3 检…...

C++ opencv RGB三通道提升亮度

#include <iostream> #include <iomanip> #include<opencv2//opencv.hpp> using namespace std; using namespace cv; //函数adjustBrightness用于图片增加亮度 void adjustBrightness(cv::Mat& image, int targetBrightness) { // 获取图像的通道数…...

Qt官网抽风连不上?亲测有效的Qt6在线安装网络问题终极解决手册

Qt6在线安装网络问题终极解决手册&#xff1a;从反复失败到一次成功 看着Qt安装器上那个刺眼的"无法连接服务器"提示&#xff0c;我第27次点击了重试按钮。作为一名有十年经验的开发者&#xff0c;我从未想过会在安装环境这一步耗费整整一个下午。这不是个例——根据…...

机器人手臂相机 vs 抓手相机:5个关键区别与选型指南(附避坑技巧)

机器人手臂相机 vs 抓手相机&#xff1a;5个关键区别与选型指南&#xff08;附避坑技巧&#xff09; 在工业自动化领域&#xff0c;视觉引导系统如同机器人的"眼睛"&#xff0c;而相机安装位置的选择往往决定了整个系统的精度与可靠性。当工程师面对手臂相机&#xf…...

Matlab GUI 计时器:基于定时器对象自动更新的数字时钟演示

Matlab图形用户界面计时器&#xff1a;使用定时器对象自动更新的MatlabGUI&#xff0c;一个数字时钟&#xff0c;作为显示基本组件的快速演示&#xff0c;带有一个按钮&#xff0c;用于恢复/暂停执行更新实验室配了新酶标仪孵箱但总有人&#xff08;比如同组摸鱼的小师妹顺便喊…...

Qwen3-ForcedAligner-0.6B生产环境:支持日均1000+分钟音频批处理任务

Qwen3-ForcedAligner-0.6B生产环境&#xff1a;支持日均1000分钟音频批处理任务 1. 项目概述 Qwen3-ForcedAligner-0.6B是一款基于阿里巴巴先进语音识别技术开发的本地化智能语音转录工具。该工具采用双模型架构设计&#xff0c;集成了Qwen3-ASR-1.7B语音识别模型和ForcedAli…...

Zotero Style插件:如何通过3个核心功能让文献管理效率提升200%?

Zotero Style插件&#xff1a;如何通过3个核心功能让文献管理效率提升200%&#xff1f; 【免费下载链接】zotero-style zotero-style - 一个 Zotero 插件&#xff0c;提供了一系列功能来增强 Zotero 的用户体验&#xff0c;如阅读进度可视化和标签管理&#xff0c;适合研究人员…...

自然界生物群体智能启发的**元启发式优化算法**,广泛应用于组合优化、函数优化、路径规划、调度问题等领域

蚁群算法&#xff08;Ant Colony Optimization, ACO&#xff09;、粒子群算法&#xff08;Particle Swarm Optimization, PSO&#xff09;和鱼群算法&#xff08;Artificial Fish Swarm Algorithm, AFSA&#xff09;均属于受自然界生物群体智能启发的元启发式优化算法&#xff…...

2026 ASNT-TC-1A 无损检测 Ⅱ/Ⅲ 级认证指南|API/ASME 认证必备 + 报考实操

一、行业刚需&#xff1a;为何 ASNT-TC-1A 资质是工业检测领域的「硬通货」在石油天然气、压力容器、钢结构焊接等工业领域&#xff0c;无损检测&#xff08;NDT&#xff09;是产品质量保障的核心环节&#xff0c;而ASNT-TC-1A作为美国无损检测学会制定的人员资格鉴定和认证标准…...

突破Windows苹果设备连接限制:Apple-Mobile-Drivers-Installer的自动化驱动解决方案

突破Windows苹果设备连接限制&#xff1a;Apple-Mobile-Drivers-Installer的自动化驱动解决方案 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址…...

手把手教你用STM32F405和SD卡,在阿里云物联网平台上实现OTA升级(MQTT协议详解)

STM32F405实战&#xff1a;基于SD卡与阿里云物联网平台的OTA升级全流程解析 当嵌入式设备部署在野外或工业现场时&#xff0c;固件升级往往成为工程师的噩梦。传统方式需要技术人员携带烧录器奔赴现场&#xff0c;不仅效率低下&#xff0c;在设备数量庞大或分布广泛时更是不切实…...

Qwen3.5-35B-A3B-AWQ-4bit惊艳效果:电路图元件识别+故障原因中文推理

Qwen3.5-35B-A3B-AWQ-4bit惊艳效果&#xff1a;电路图元件识别故障原因中文推理 1. 模型能力展示 Qwen3.5-35B-A3B-AWQ-4bit作为一款面向视觉多模态理解的量化模型&#xff0c;在电路图分析和故障诊断领域展现出令人惊艳的能力。这个经过4bit量化的模型不仅保持了原版35B参数…...