javascript - 如何将本地文件从 Flask 发送到 Reactjs

Question

我将 React JS 作为前端，Flask 作为应用程序的后端。这个想法是用户上传图像进行反应，然后转移到 Flask 中的处理，然后 Flask 将处理后的图像返回给 React 进行显示。

为了将文件从 Flask 发送到 React，我将图像保存在本地文件夹中。所以顺序看起来像这样：

--node_modules,public,src // React files
--api  //Flask files
  -upload_image
  -app.py
  -...

所以在 Flask 中，我会将图像的 url 从本地服务器发送到 React，如下所示：

@app.route('/get-cut-image',methods=["GET"])
def get_cut_img():
    if path_is_valid:
        return "http://127.0.0.1:5000/api/upload_image/img.png"
    else:
        return "No valid path"

在 React 中，我使用 axios 调用服务器：

export default class Body extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: "", 
      result: false,
      upload: true,
    };
    this.getDatas = this.getDatas.bind(this);
  }
  getDatas() {
    try {
      const dataImage = axios.get(
        "http://127.0.0.1:5000/get-cut-image"
      );
      this.setState({
        images: dataImage.data,
      });
    } catch (error) {
      console.log(error);
    }
    this.setState({result: true, upload: false});

  }
  render() {
    return (
        <img src={this.state.images}></img>
    );
  }

但是，服务器将正确的 url 发送到图像文件夹，但是，我无法在客户端中获取 url。有什么帮助吗？

编辑：所以我发现 localhost:3000/ 是 react 的公共文件夹。所以我的目录看起来像这样：

--node_modules,public,src // React files
--api  //Flask files
  -app.py

我有另一个处理图像的功能，并将图像保存到public文件夹

@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
   img_BGRA = <some_processing> #return PIL image
   img_BGRA.save(<home/user/.../public/filename.png>)

当我尝试这样做时，在我的反应页面中崩溃并再次重新启动。

标签： javascriptpythonreactjsflask