Сохранение блоба на сервере?

Question

поэтому у меня есть программа, которая захватывает метаданные из звукового файла.

Если у звукового файла есть изображение альбома, я могу превратить его в 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 установить и добавить каплю в форме, как только его отправил, но он просто проходит или как определено или URL объекта 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('/'); 
      } 
     }); 
    }); 
}); 

Итак, все работает так, как я хочу, кроме возможности сохранить изображение блоба непосредственно в каталоге сервера для хранения изображений альбомов.

Любая помощь при решении этого будет принята с благодарностью, спасибо.

Answer 1

Append [...] в форме, как только его отправил

Вы не можете добавить к форме, как только она была размещена. Но вы можете отложить передачу формы до тех пор, пока не будут получены все ваши метаданные.

Я попытался FormData установить и добавить каплю [...], но он просто проходит либо не определено или блоб URL

Похоже, что вы проезжали вашу url переменную в формы, а не самого блоба.

Этот фрагмент кода, надеюсь, дает вам подсказку в правильном направлении

$('#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">