NodeJS Expressサーバーにmp3をアップロードするとファイルが破損する

Question

WebクライアントからNode ExpressサーバーにMP3ファイルをアップロードしたいとします。ファイルをアップロードしてディスクに書き込むことができます。しかし、ファイルが壊れてしまい、MP3プレーヤーで曲を再生できません。

違いがある場合は、ファイルをOS Xマシンからアップロードしてから、Ubuntuサーバに書き込みます。アップロードされたファイルのアップロードされたサイズは元のサイズよりも大きいです。このワークフローではエラーは発生しません。私がファイルを再生するまで、何もうまくいかない。

私のコードは下記を参照してください。なぜ私がこれを経験しているかについてのアイデアはありますか？

CLIENT

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

Answer 1

データはbase64でエンコードされた文字列として書かなったアップロードされたファイルを検査するとき、私は気づきました。

は私がファイル読み取りに FileReader.readAsDataUrlメソッドを使用していた私のクライアントコードにこのバック、トレースさ：

を...結果の属性は、BASE64として、ファイルのデータを表すURLなどのデータが含まれています文字列

ミステリーが解決されました。今度は、サーバー上のファイルをデコードするか、最初にこれをエンコードしないFileReaderメソッドを使用するかを判断するだけです。

Answer 2

ファイルのアップロードにこのコードを使用します。これはサーバー側のコードです。私は、ビューのフォルダを作成し、その中で、このHTMLファイルを置く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"); 
}); 

としてそれを命名しました。私は

<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を実行しますvideo.htmlとして命名しました。ブラウザを開き、このapi http://localhost:3000/api/fileを実行し、audio/video/pdf/image etc ..任意のファイルを選択します。あなたがディスクにアップロードするファイルです。このコードでは、このルートプロジェクトフォルダのファイルをpublic/uploadsにアップロードしています。アップロードしたファイルを保存する場所から保存先フォルダを指定できます。お役に立てれば。