如何将文件从html发送到节点服务器

Question

我在使用express的节点中有一个服务器，在html中有一个简单的主页，它使用recorder.js来创建一个音频文件。

现在我想要做的是将音频文件发送到我的server.js，这样我就可以在那里使用它（无需下载）。

在html中：

recorder && recorder.exportWAV(function(blob) {
  url = URL.createObjectURL(blob);
  var li = document.createElement('li');
  au = document.createElement('audio');
  hf = document.createElement('a');

  au.controls = true;
  au.src = url;
  hf.href = url;
  hf.innerHTML = hf.download;
  li.appendChild(au);
  li.appendChild(hf);
  recordingslist.appendChild(li);
});

音频文件存储在客户端创建的URL中。

我怎么能把这个音频文件发送到我的server.js？ 我没有在互联网上看到任何类似的问题。

Answer 1

使用FormData Web API。 您可以使用下面定义的postBlobToServer（）函数作为recorder.exportWAV（）的回调，而不是您的匿名函数。 还包括第二个功能，用于为声音文件生成随机文件名。

在服务器端，您需要捕获“wav_blob”字段并保存文件。

function generateFilename() {
  // Generates a random 6 character string suitable for a filename
  var filename = "";
  var dictionary = "abcdefghijklmnopqrstuvwxyz0123456789_ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  for (var i=0;i < 6; i++)
    filename += dictionary.charAt(Math.floor(Math.random() * dictionary.length));
  return filename;
}

function postBlobToServer(blob) {
  // Form field for blob file
  var blob_field = "wav_blob";
  // Generate a random file name
  var wav_filename = generateFilename() + ".wav";
  // The URL for the form POST action
  var server_url = "http://server.com/path";
  // Create a new FormData object
  // See https://developer.mozilla.org/en-US/docs/Web/API/FormData
  var formData = new FormData();
  // Add the blob_field to the form
  formData.append(blob_field, blob, wav_filename);
  // Set up the AJAX request
  var xhr = new XMLHttpRequest();
  // Open the connection
  xhr.open("POST", server_url, true);
  // Set up a handler for when the request finishes
  xhr.onload = function () {
    if (xhr.status === 200) {
      // File uploaded successfully
      // might want to notify the user
    } else {
      alert("An error occurred!");
    }
  };
  // Send the data
  xhr.send(formData);
}

Answer 2

如果您只发送二进制文件，FormData和文件名就不那么重要了。 然后它也变得更容易保存在fs上，因为你不需要任何身体解析器

客户：

recorder && recorder.exportWAV(blob => 
  fetch(url, {method: 'post', body: blob})
)

服务器：

var fs = require('fs')

var dest = fs.createWriteStream('myOutput.wav')
req.pipe(dest)