將Blob保存到服務器？

Question

所以我有一個從聲音文件中抓取元數據的程序。

如果聲音文件有一個專輯圖像，我可以將其轉換爲blob對象url並在本地使用它，但是如何才能將該blob圖像保存到服務器？

現在我有兩個文件輸入字段，一個用於選擇聲音文件，另一個用於選擇圖像（如果沒有聲音文件從中拉出）。

我正在使用musicmetadata（https://github.com/leetreveil/musicmetadata），這就是我如何從聲音文件中拉出圖像。

musicmetadata(data, function(err, result){ 
      if(err) 
       console.log(err); 

      if(result.picture.length > 0){ 
       var picture = result.picture[0]; 
       var url = URL.createObjectURL(new Blob([picture.data], {'type':'image/' + picture.format})); 
       var image = document.getElementById('albumImage'); 

       imageList.innerHTML = "<p>" + result.title + "." + picture.format + "</p>"; 

       image.style.backgroundImage = "url(" + url + ")"; 
       image.style.backgroundRepeat = "no-repeat"; 
       image.style.backgroundSize = "155px 131px"; 

       bgImage = url; 
      } else { 
       imageList.innerHTML = "<p>No image available in Meta Data<p>"; 
      } 

我試過FORMDATA設置和BLOB追加到形式一次貼出的，但它只是作爲傳遞未定義或斑點斑點網址：http://localhost:3000/5c9db74b-f4f1-4125-8839-a7604ec1f7f9

我使用快遞與multer到處理文件上傳。如果添加測試條件，如果在發佈後有相冊圖像，則將其保存到文件系統中，否則只需從文件輸入圖像字段中保存文件即可。

這裏是我的上傳需求信息，以防萬一。

var manageUpload = upload.fields([{ name: 'fileElem', maxCount: 1 }, { name: 'imageElem', maxCount: 1 } ]); 
app.post('/upload', manageUpload, function(req, res){ 
    post = new Post(); 

    User.findOne({ username: req.session.user }, function(err, newUser){ 
     if(err) console.log(err); 

     post.audioFile = req.files['fileElem'][0].filename; 

     if(typeof req.files['imageElem'] !== "undefined"){ 
      post.imageFile = req.files['imageElem'][0].filename; 
     } 

     post._user = newUser._id; 
     post.title = req.body.title; 
     post.artist = req.body.artist; 
     post.start = req.body.start; 
     post.stop = req.body.stop; 
     post.genre = req.body.genre; 
     post.tags = req.body.tags; 

     post.save(function(err, newPost){ 
      if(err) 
       console.log(err); 
      if(newPost){ 
       res.redirect('/'); 
      } 
     }); 
    }); 
}); 

因此，除了能夠將blob圖像直接保存到用於存儲專輯圖像的服務器目錄之外，一切工作方式都是我想要的。

解決此問題的任何幫助將不勝感激，謝謝。

Answer 1

追加[...]的形式，一旦其發佈

一旦它已經發布，您不能追加到窗體。但是，您可以延遲提交表單，直到獲取所有元數據。

我試過FORMDATA設置和追加BLOB [...]，但它只是傳遞未定義或斑點網址

它看起來像你通過你的url變量的形式而不是blob本身。

這個片段希望讓你在正確的方向

$('#file-input').on('change', function() { 
 
    var formData = new FormData(); 
 
    var file = this.files[0]; 
 

 
    musicmetadata(file, function(err, result) { 
 
    var picture = result.picture[0]; 
 
    var picBlob = new Blob([picture.data], { 
 
     'type': 'image/' + picture.format 
 
    }); 
 

 
    formData.append('fileElem', file); 
 
    formData.append('imageElem', picBlob); 
 
    
 
    console.log(formData); // Do whatever you want with the data 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/musicmetadata/2.0.2/musicmetadata.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="file-input" type="file" name="file">