javascript - 将 blob 保存到服务器？

Question

所以我有一个程序可以从声音文件中获取元数据。

如果声音文件有专辑图像，我可以将其转换为 blob 对象 url 并在本地使用它，但我如何才能将该 blob 图像保存到服务器？

现在我有两个文件输入字段，一个用于选择声音文件，另一个用于选择图像(如果没有从声音文件中提取图像)。

我正在使用音乐元数据 ( 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 并将其附加到表单，但它只是作为未定义或 blob url blob: http://localhost:3000/5c9db74b-f4f1-4125-8839-a7604ec1f7f9 传递。

我正在使用express和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

append [...] to the form once its posted

表单发布后，您将无法追加内容。但您可以延迟提交表单，直到获取所有元数据。

I've tried formData to set and append the blob [...], but it just passes either undefined or the blob url

看起来您正在将 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">