使用 axios 將 Json 數據從 ReactJs 前端發布到 Flask 后端

Question

我設法從 Flask 獲取數據到 ReactJs 前端，但我還沒有設法將數據從 ReactJs 發送到 Flask API。

我正在上傳一個文件並將其存儲在 Firebase 中。 這很好用。 但我想在下載 URL 存儲后將其發送回 Flask API。

這是我在前端嘗試做的事情。

const FileUpload = ({}) => {
    var downloadLink;
    const [progress, setProgress] = useState(0);
    const formHandler = (e) => {
      e.preventDefault();
      const file = e.target.files[0];
      uploadFiles(file);
      const postPath = (e) => {
        e.preventDefault();
        axios.post('http://localhost:3000/filePath', {
            'path': downloadLink
        }).then(response => console.log(response));
    }
    postPath();
    };

這就是我正在做的事情，以確保在上傳后將數據發送到 API。 所以我在uploadFiles(file)之后調用postPath() ) 。

在 server.py （Flask API）中，我正在執行以下操作來獲取 Json 數據。

@app.route('/filePath', methods=['POST'])
def get_path():
    return (request.get_json())

注意在同一個 server.py 中，我還有另一條路線以及相應的功能。 我不知道它是否相關，但在這里。

@app.route("/details")
def details():
    data = person(r'path').get_data()
    return {"name": data.get('name')
    }

我不斷收到此錯誤。

TypeError：無法讀取未定義的屬性（讀取“preventDefault”）

  16 |      uploadFiles(file);
  17 | 
  18 |      const postPath = (e) => {
> 19 |        e.preventDefault();
     | ^  20 |        axios.post('http://localhost:3000/filePath', {
  21 |            'path': downloadLink
  22 |        }).then(response => console.log(response));

Answer 1

問題出在 React 代碼中，在它到達您的 Flask 應用程序之前： postPath函數期望傳遞一個事件，但您在沒有任何參數的情況下調用它： postPath() 。

無法讀取未定義的屬性（讀取“preventDefault”）

在這種情況下， e是未定義的，因此您不能在其上調用preventDefault 。

在postPath中實際上不需要e.preventDefault() ，在表單提交處理程序中使用e.preventDefault()來防止提交表單時的默認行為（重新加載頁面）。 在您的情況下，您希望保留e.preventDefault()的第一個實例，但您可以刪除第二個實例。

您實際上可以完全刪除postPath函數，它並沒有真正為您做任何事情：

    const formHandler = (e) => {
      e.preventDefault();
      const file = e.target.files[0];
      uploadFiles(file);
      axios.post('http://localhost:3000/filePath', {
        'path': downloadLink
      }).then(response => console.log(response));
    };