Question

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

如果声音文件有专辑图像，我可以将其转换为blob对象网址并在本地使用它，但我怎样才能将该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并将其附加到表单中，但它只是作为undefined或blob url blob传递：http://localhost:3000/5c9db74b-f4f1-4125-8839-a7604ec1f7f9

我正在使用express with 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 [...]，但它只是传递了undefined或blob url

看起来您将url变量传递给表单而不是blob本身。

这个片段希望能为您提供正确方向的提示

＆＃13;

$('#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
  });
});

＆＃13;

<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">

＆＃13;

将blob保存到服务器？

1 个答案: