2017-09-10 1 views
1

내 웹 클라이언트에서 Node Express 서버로 MP3 파일을 업로드하고 싶습니다. 파일을 업로드 한 다음 디스크에 쓸 수 있습니다. 그러나 파일이 손상되어 MP3 플레이어를 사용하여 노래를 재생할 수 없습니다.NodeJS Express 서버에 mp3를 업로드하면 파일이 손상됩니다.

차이가 나는 경우 파일이 OS X 컴퓨터에서 업로드되고 우분투 서버에 기록됩니다. 업로드 된 파일의 업로드 크기가 원본 크기보다 큽니다. 이 워크 플로에서 오류가 발생하지 않습니다. 파일을 재생하기 전에는 아무 것도 잘못되지 않습니다.

내 코드는 아래를 참조하십시오. 왜 내가 이것을 경험하는지에 대한 아이디어가 있습니까?

CLIENT 데이터를 base64로 인코딩 된 문자열로 기록지고 있었다 업로드 된 파일을 검사 할 때 내가 발견

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

진단을 돕기 위해 비슷한 크기의 텍스트 파일을 만들고 업로드하는 것이 좋습니다. 그런 다음 디스크의 파일 내용을보고 보낸 파일과 다른 점을 알 수 있습니다. – skirtle

+0

나는이 줄이 의심 스럽다. 'body : song'. 제 추측으로는 '노래'가 그럴 수 없다는 것입니다. – skirtle

+0

@skirtle 전화하세요. 테스트 파일을 "TEST"라고 쓰여서 업로드하려고 시도했습니다. 결과 파일을 읽었습니다. "data : text/plain; base63, " 다음 mp3 파일을 검사했습니다.
데이터 : text/plain; base63, kashiB

답변

1

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

서버.

내가 파일을 읽을 수있는 FileReader.readAsDataUrl 방법을 사용하고 내 클라이언트 코드이 다시 추적 :

을 ... 결과 속성은 64 기수로 파일의 데이터를 나타내는 URL로 데이터를 포함 문자열

미스테리가 해결되었습니다. 이제는 서버에서 파일을 디코딩 할 것인지 또는 먼저 인코딩하지 않는 FileReader 메서드를 사용해야 하는지를 알아야합니다.

+0

해결 방법은 읽지 않고 곧바로 서버에 파일을 저장하는 것이 었습니다. 기본 인코딩이 유지되었습니다. – kashiB

1

파일 업로드시이 코드를 사용하십시오. 이것은 서버 측 코드입니다. 내가보기 폴더를 생성하고이 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> 

가 서버 A node server.js을 실행 video.html라는 이름으로. 브라우저를 열고이 API를 실행하여 http://localhost:3000/api/file을 선택하고 파일을 선택하십시오. audio/video/pdf/image etc .. 디스크에 업로드하려는 파일. 이 코드에서는이 루트 프로젝트 폴더의 public/uploads에 파일을 업로드하고 있습니다. 업로드 된 파일을 저장할 위치에서 대상 폴더를 지정할 수 있습니다. 희망이 도움이됩니다.

관련 문제