将 mp3 上传到 Node JS Express 服务器损坏的文件答案

【问题标题】：Uploading mp3 to NodeJS Express server corrupts file将 mp3 上传到 Node JS Express 服务器损坏的文件
【发布时间】：2017-09-11 13:44:33
【问题描述】：

我想将一个 MP3 文件从我的 Web 客户端上传到 Node Express 服务器。我可以上传文件，然后将其写入磁盘。但是，文件已损坏，我无法使用 MP3 播放器播放歌曲。

如果有区别，文件将从 OS X 机器上传，然后写入 Ubuntu 服务器。上传文件的上传大小比原来的大。我在此工作流程中没有收到任何错误。在我开始播放文件之前没有任何问题。

请参阅下面的代码。关于我为什么会遇到这种情况的任何想法？

客户

uploadSong: (song) => {
  fetch('http://localhost:8080/song', {
    method: 'PUT',
    headers: {
      'Content-Type': 'audio/mpeg',
    },
    body: song
  })
  .then( response => {
    console.log("Got response after uploading song:", response);
  })
  .catch( error => {
    console.log("Error in Firebase AC upload song: ", error);
  });
}

服务器

app.put("/song", (req, res) => {
  var mp3SongName = 'test.mp3';
  var mp3_file = fs.createWriteStream(mp3SongName);

  mp3_file.on('open', function (fd) {
    req.on('data', function(data){
        console.log("loading... \n");
        mp3_file.write(data);
    }); 

    req.on('end', function(){
        console.log("finalizing...");
        mp3_file.end();
        res.sendStatus(200);
    });
  });
}

【问题讨论】：

为了帮助诊断，我建议创建一个大小相似的文本文件并上传。然后您可以查看磁盘上文件的内容，以了解它与您发送的文件有何不同。
我怀疑这条线：body: song。我的猜测是 song 不是它应该的样子。
@skirtle 好电话。我尝试上传一个只有“TEST”的测试文件。结果文件显示：“data:text/plain;base63,” 然后我检查了 mp3 文件。其内容为：
data:text/plain;base63,

标签： javascript node.js express web file-upload

【解决方案1】：

在检查上传的文件时，我注意到数据被写入为 base64 编码字符串。

我将此追溯到我的客户端代码，该代码使用FileReader.readAsDataUrl 方法读取文件：

...result 属性包含作为 URL 的数据，将文件数据表示为 base64 编码字符串

谜团解开了。现在我只需要弄清楚是在服务器上解码文件，还是使用一开始就不对其进行编码的 FileReader 方法。

【讨论】：

解决方案是直接归档到服务器而不读取它。这保留了默认编码。

【解决方案2】：

使用此代码上传文件。这是服务器端代码。我将其命名为server.js

var express = require('express');
var multer = require('multer');
var path = require('path');
var rand;
var app = express();
var ejs = require('ejs')
app.set('view engine', 'ejs')
var storage = multer.diskStorage({
    destination: function(req, file, callback) {
        callback(null, './public/uploads')
    },
    filename: function(req, file, callback) {
        //callback(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
                //callback(null, file.originalname)
        rand=Date.now() + path.extname(file.originalname);

        callback(null, file.fieldname + '-' + rand);

    }

})
var upload = multer({
        storage: storage});
app.get('/api/file',function(req,res){
res.sendfile('E:/syed ayesha/nodejs/uploads/video/views/video.html');
});
app.post('/api/file',upload.single('userFile'), function(req, res) {
    console.log(req.file);
    console.log(req.file.path);
    res.send(rand);

})
app.listen(3000,function(){
console.log("working on port 3000");
});

创建一个views 文件夹并将这个html 文件放入其中。我命名为video.html

<form id="uploadForm"
      enctype="multipart/form-data"
      action="/api/file"
      method="post"
>
 <input type="file" name="userFile"/>
<input type="submit" value="Upload File" name="submit">

</form>

运行服务器node server.js。打开浏览器并运行这个 api http://localhost:3000/api/file 并选择它可能的任何文件 audio/video/pdf/image etc..任何你想上传到磁盘的文件。在这段代码中，我将我的文件上传到这个根项目文件夹中的public/uploads。您可以提供要存储上传文件的目标文件夹。希望这会有所帮助。

【讨论】：