将blob保存到服务器

Saving a blob to the server?

本文关键字：服务器 保存 blob      更新时间：2023-09-26

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

如果声音文件有一个专辑图像，我可以把它变成一个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到表单一旦发布，但它只是传递为未定义或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图像直接保存到用于存储相册图像的服务器目录之外，一切都按照我想要的方式工作。

如果你能帮我解决这个问题，我将不胜感激。

添加[…[/p]到表单

表单一旦发布就不能追加了。但是，您可以延迟提交表单，直到获取所有元数据。

我已经尝试过设置和附加blob[…]]，但它只是传递undefined或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">

相关文章：