2016-10-08 24 views
2

ローカルに保存したオーディオファイルを読み込み、ajax経由でサーバーにアップロードしてからサーバーに保存します。このプロセスのどこかで、ファイルが破損し、サーバーに保存されているファイルを再生できなくなります。ajaxでバイナリエンコードされたオーディオファイルをアップロードして保存する

私はプロセスが進行していることを示す簡単なコードを列挙しますので、うまくいけばどこが間違っているのかが分かります。音声が記録された後(getUserMediaMediaRecorderを使用して

1))、ローカルファイルが保存されている:

var audioData = new Blob(chunks, { type: 'audio/webm' }); 
var fileReader = new FileReader(); 
fileReader.onloadend = function() { 
    var buffer = this.result, 
     uint8Array = new Uint8Array(buffer); 

    fs.writeFile('path/to/file.webm', uint8Array, { flags: 'w' }); 
} 
fileReader.readAsArrayBuffer(audioData); 

2)その後、このローカルファイルを読み込み、ライブラリを使用して(サーバーに送信されますAJAXリクエストを送信するためにaxios

fs.readFile('path/to/file.webm', 'binary', (err, data) => { 
    var formData = new FormData(); 
    formData.append('file', new Blob([data], {type: 'audio/webm'}), 'file.webm'); 
    axios.put('/upload', formData); 
}); 

3)サーバは、この要求を処理し、保存します

[HttpPut] 
public IActionResult Upload(IFormFile file) 
{ 
    using (var fileStream = new FileStream("path/to/file.webm", FileMode.Create)) 
    { 
     file.CopyTo(fileStream); 
    } 
} 

ファイルサーバー上のオーディオファイルが再生されないが、ローカルのオーディオファイルを正常に再生することができます。

私はこれは役立つ情報であるかどうかわからないんだけど、ここで私は、テキストエディタ(メモ帳++)でローカルファイルを開いたときに、私が見たテキストの最初の数行がある

enter image description here

そして、

enter image description here

だから、ちょっと

同じ...が異なる:同じことが私はサーバー上の1つを開いたとき。私は無数の異なる方法をエンコードしようとしましたが、すべてが失敗するようです。誰かがここを正しい方向に向けることができる指が交差した。

答えて

1

問題は、私がfs.readFileからファイルの内容をどのように通過していたかにありました。もし私がbase64でエンコードされた生のバッファーをfs.readFileからjson経由で渡したら、それをサーバー上のバイト配列に変換して保存しておけば、サーバーで正常に再生できます。


fs.readFile('path/to/file.webm', (err, data) => { 
    axios.put('/upload', { audioData: data.toString('base64') }); 
}); 

[HttpPut] 
public IActionResult Upload([FromBody]UploadViewModel upload) 
{ 
    var audioDataBytes = Convert.FromBase64String(upload.AudioData); 

    using (var memoryStream = new MemoryStream(audioDataBytes)) 
    using (var fileStream = new FileStream("path/to/file.webm", FileMode.Create)) 
    { 
     await memoryStream.CopyToAsync(fileStream); 
    } 
} 
1

実は、これは文字エンコーディングの問題です。おそらくUTF-8とISO-8859が混在しているため、ファイルが壊れてしまいます。

おそらく、HTMLページの文字セットをサーバー上の文字セットに設定する必要があります。また、受け取るデータの文字セットがわからない場合は、サーバーの予備チェックを実行してください。

base64に変換すると、ASCII範囲の文字のみが使用されるため、この問題が解決されます。

関連する問題