使用multer將音頻檔案上傳到expressjs服務器

我正在嘗試使用 express js 和 multer 錄制然后將錄制的音頻保存在我的本地目錄（上傳檔案夾）中。第一部分是錄制正在使用 mic-recorder-to-mp3 作業的音頻，但我被困在第二部分，即在單擊按鈕時保存音頻檔案。如果我做錯了什么，請糾正我。這是React JS檔案中的代碼：

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 });
      }
    );
  }

  // this function being called on save button
  Save = (e) => {
    e.preventDefault();
    const url = "http://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">Save</button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default Record;

這是我的 server.js 代碼，其中我有一個從客戶端發送的發布請求。

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熱心網友回復：

您需要上傳blob，而不是blobUrl 嘗試將 blob 添加到狀態，然后將其附加到表單（保持blobUrl原樣以進行渲染）：

 this.state = {
      blob: null
    };
//...

this.setState({ blob});

//...
data.append("audio", this.state.blob, 'mp3.mp3');

編輯

您可以從緩沖區創建一個檔案，然后附加它，以防您需要向檔案添加更多元資料：

this.state = {
    buffer: null
};


const file = new File(this.state.buffer, 'mp3.mp3', {
    type: this.state.blob.type
});


data.append("audio", file);

標籤：javascript节点.js反应表示穆尔特

上一篇：錯誤[ERR_HTTP_HEADERS_SENT]：發送到客戶端后無法設定標頭[nodeandexpressjs]--

下一篇：單擊“計算”按鈕后出現錯誤