ReactJS中未捕獲（承諾）AxiosError

我有一個簡單的專案，我在其中錄制音頻，然后將錄制的音頻保存在系統目錄中。我已經完成了錄制部分，但現在我正在嘗試使用節點 js 將錄制的音頻保存在系統中，單擊按鈕。但是在創建 api 時，我得到了以下錯誤。如果我做得正確，我會感到困惑。

這是我的Record.js檔案：

import React from "react";
import MicRecorder from "mic-recorder-to-mp3";
import { Button } from "reactstrap";
import "./App.css";
import Navbar from "./Navbar";
import mic from "./imgs/mic.png";
import stop from "./imgs/stop.png";
import axios from "axios";

const Mp3Recorder = new MicRecorder({ bitRate: 128 });

class Record extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isRecording: false,
      blobURL: "",
      isBlocked: false,
    };
  }

  start = () => {
    if (this.state.isBlocked) {
      console.log("Permission Denied");
    } else {
      Mp3Recorder.start()
        .then(() => {
          this.setState({ isRecording: true });
        })
        .catch((e) => console.error(e));
    }
  };

  stop = () => {
    Mp3Recorder.stop()
      .getMp3()
      .then(([buffer, blob]) => {
        const blobURL = URL.createObjectURL(blob);
        this.setState({ blobURL, isRecording: false });
      })
      .catch((e) => console.log(e));
  };

  componentDidMount() {
    navigator.getUserMedia(
      { audio: true },
      () => {
        console.log("Permission Granted");
        this.setState({ isBlocked: false });
      },
      () => {
        console.log("Permission Denied");
        this.setState({ isBlocked: true });
      }
    );
  }

  Save = (e) => {
    e.preventDefault();
    const url = "localhost:8000/record";
    const data = new FormData();
    data.append("audio", this.state.blobURL);

    axios.post(url, data).then((e) => {
      console.log("success");
    });

    alert("audio uploaded successfully");
  };

  render() {
    return (
      <div className="big-wrapper light">
        <div className="container">
          <Navbar />
          <br />
          <br />
          <br />
          <div className="cont1">
            <h2 style={{ color: "white", marginLeft: "-98px" }}>
              Remove Noise From Your Audio
            </h2>
            <br />
            <Button
              className="bg-transparent border btn record-button rounded-circle shadow-sm text-center"
              id="recordButton"
              onClick={() => {
                this.state.isRecording ? this.stop() : this.start();
              }}
            >
              {this.state.isRecording ? <img src={stop} /> : <img src={mic} />}
            </Button>
            <br />
            <br />
            <audio
              src={this.state.blobURL}
              controls="controls"
              autoPlay
              id="audio-element"
            />
            <br />
            <br />
            <form
              method="post"
              action="#"
              id="#"
              onSubmit={this.Save}
              className="form-group"
            >
              <button className="btn-recordaudio">Submit</button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default Record;

這是我的index.js檔案：

const path = require("path");
const fs = require("fs");
const express = require("express");
const multer = require("multer");
const cors = require("cors");
const app = express();

app.use(cors());
app.use(express.static("uploads"));

const storage = multer.diskStorage({
  destination(req, file, cb) {
    // directory to save the audio
    cb(null, "uploads/");
  },
  filename(req, file, cb) {
    const fileNameArr = file.originalname.split(".");
    // file name
    cb(null, `recording.${fileNameArr[fileNameArr.length - 1]}`);
  },
});

const upload = multer({ storage });

app.post("/record", upload.single("audio"), (req, res) =>
  res.json({
    success: true,
  })
);

app.listen(8000, () => {
  console.log("server is running");
});

如果我做錯了什么，請糾正我。

uj5u.com熱心網友回復：

代碼ERR_BAD_REQUEST表示您的請求錯誤

然后查看訊息“Unsupported protocol localhost:”

所以，我認為問題是你沒有定義是http還是https

因此，請嘗試改用http://127.0.0.1:3000

標籤：javascript节点.js反应表示axios

上一篇：有什么方法可以重新啟動托管在vercel上的nodejs應用程式？

下一篇：表達不處理條件