将文件从React.JS前端移动到C ++后端

debugcn 发表于 Dev

杰里斯·哈达德

所以我有一个用C ++编写的函数，可以在文件上使用。我可以将其转换为脚本，然后脚本以文件位置的参数为例进行处理，这不是问题。

我的前端是用React完成的，它仍然没有连接到后端。我有一个按钮，它是用户单击的“上传文件”，并且需要在我的后端具有此文件才能在其上运行C ++代码。

从理论上讲，我的想法（不确定是否可行）：

用户选择要上传的文件
从前端，我们将其上传到云存储，例如Google Drive
然后，从前端，我使用REST API发送HTTP请求，并将参数作为文件直接下载链接。
然后，REST API运行一个Python函数，该函数执行以下shell命令：

wget (link that we got from the HTTP request through REST API

之后，python脚本在文件上运行C ++函数，并通过HTTP请求返回输出。

那有意义吗？有没有更简单或更好的方法？

谢谢

雅辛（Yacine Mahdid）

问题

让用户加载文件->在该文件上运行C ++函数->将输出返回给用户。

REST-API可能的解决方案

正如您在问题中所述，您可以将其上传到Google驱动器，然后再获取该文件，但是它有点太复杂了。相反，您可以做的是跳过上载到Google驱动器的过程，然后直接通过formdata发送文件。

这是React的一个工作示例，摘自这里：

import React from 'react'
import axios, { post } from 'axios';

class SimpleReactFileUpload extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      file:null
    }
    this.onFormSubmit = this.onFormSubmit.bind(this)
    this.onChange = this.onChange.bind(this)
    this.fileUpload = this.fileUpload.bind(this)
  }
  onFormSubmit(e){
    e.preventDefault() // Stop form submit
    this.fileUpload(this.state.file).then((response)=>{
      console.log(response.data);
    })
  }
  onChange(e) {
    this.setState({file:e.target.files[0]})
  }
  fileUpload(file){
    const url = 'http://example.com/file-upload';
    const formData = new FormData();
    formData.append('file',file)
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    }
    return  post(url, formData,config)
  }

  render() {
    return (
      <form onSubmit={this.onFormSubmit}>
        <h1>File Upload</h1>
        <input type="file" onChange={this.onChange} />
        <button type="submit">Upload</button>
      </form>
   )
  }
}