前端react+axios，后端python+flask，实现前端上传图片给后端

最新推荐文章于 2023-06-11 09:00:41 发布

趁早Y_

最新推荐文章于 2023-06-11 09:00:41 发布

阅读量1.3k

点赞数 4

CC 4.0 BY-SA版权

文章标签： python flask react.js

本文链接：https://blog.csdn.net/weixin_45002937/article/details/120468649

这篇博客展示了如何使用React前端与Python后端进行文件上传的交互。前端通过axios库发送POST请求，以multipart/form-data格式传递图片数据。后端使用Flask接收文件，并用OpenCV对图片进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端代码App.js：

import React from "react";
import axios from "axios";

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            img1 : ''
        }
    }
    render() {
        return (
            <div>
                <input type="file" name="file" multiple="multiple" id="uploadimg1" onChange={() => this.getimg1()}/>
                <br />
                <button onClick={() => this.getcomparisonresult()}>提交</button>
            </div>
        )
    }
    getimg1() {

        let fileData = document.querySelector("#uploadimg1").files[0];
        let formdata = new FormData();
        formdata.append("img1", fileData);
        this.setState({
            img1: formdata
        })
    }
    getcomparisonresult() {
        let headers = {
            'Content-Type': 'multipart/form-data'
          }
        axios.post(
            "http://127.0.0.1:5000/student/", this.state.img1,{headers: headers}
        ).then(res => {
            console.log(res.data)
        }).catch(err => {
            console.log("错误")
            console.error(err);
        });
    }
}

后端python端api.py：

from flask import Flask,jsonify,request
from flask_cors import *
import cv2
import numpy as np
app = Flask(__name__)
CORS(app,supports_credentials = True)
#访问接口：http://127.0.0.1:5000/student
#请求方式：POST
@app.route('/student/',methods=['POST'])
def student():
    student_name = request.files.to_dict()
    image1 = cv2.imdecode(np.asarray(bytearray(student_name['img1'].read()),dtype='uint8'), cv2.IMREAD_COLOR)
    cv2.imshow('img1', image1)
    
if __name__ == '__main__':
    app.run(debug=True)