如何将输出 blob 上传到服务器？答案

【问题标题】：How to upload output blob to a server?如何将输出 blob 上传到服务器？
【发布时间】：2019-10-25 12:31:12
【问题描述】：

尝试从浏览器上传 blob 数据，控制台中有输入和输出。我正在使用来自 (https://github.com/fengyuanchen/compressorjs) 的图像压缩器。

一切正常，但理解热点“捕捉”这个 blob 并发送到服务器的问题。

我试过了：

<form method="post" action="">
<input type="button" value="Проверить" onclick="myAjax()">
</form>

<script type="text/javascript">
var file = "outputURL"; // instance of File
function myAjax() {
$.ajax({
  type: 'POST',
  url: 'upload.php',
  data: file,
  contentType: 'application/my-binary-type', // set accordingly
  processData: false
});
}
</script>

上传.php：

$fname = "11" . ".wav";
move_uploaded_file($_FILES['file']['tmp_name'], "/" . $fname);

这个想法是在 html 上有一些按钮，它将输出的压缩图像上传到服务器。我还尝试了其他几个示例，但主要问题 - 我不了解如何处理 blob。

这是我的控制台输出：

Input:  FilelastModified: 1548655773101lastModifiedDate: Mon Jan 28 2019 11:09:33 GMT+0500 {}name: "IMG_20160705_165257565.jpg"size: 3233327type: "image/jpeg"webkitRelativePath: ""__proto__: File

Output:  BloblastModified: 1572005360479lastModifiedDate: Fri Oct 25 2019 17:09:20 GMT+0500  {}name: "IMG_20160705_165257565.jpg"size: 1625797type: "image/jpeg"__proto__: Blob

请帮助了解如何在浏览器中处理 blob 数据。

【问题讨论】：

FormData 可以轻松处理 blob，使用 append method 您可以直接添加它们，然后您只需将 FormData 实例指定为您通过 AJAX 请求发送的data。跨度>
有人可以根据我给出的细节举一个例子吗？对于建议 - 谢谢。会自学。
好的。我可以搭把手。您使用的是什么类型的服务器页面？ PHP，ASP.net，如果你能提供一些细节，我可以帮你举个例子。

标签： javascript php ajax upload blob

【解决方案1】：

这里是关于如何上传 blob 的完整示例：

<html>
<head>
<meta charset="UTF-8"> 
<script>
function init() {
  var form = document.getElementById('f');
  if(form) {
    form.addEventListener('submit', function(event) {
      if(form.ajax.checked) {
        var formData = new FormData();
        for(var i=0; i<form.length; i++) {
          if(form[i].type == 'file') {
            var files = form[i].files;
            var blob = files[0].slice(0, files[0].size, files[0].type);
            formData.append(form[i].name, blob, files[0].name);
          }
          else {
            formData.append(form[i].name, form[i].value);
          }
        }
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        xhr.onreadystatechange = function() {
          if(xhr.readyState == 4) {
            // what do I do here?
            // is it
            // window.location = URL.createObjectURL(xhr.response);
            // or should it be
            // document.write(responseText);
            // or even
            // document.close(); document.open(); document.write(xhr.responseText);
            // or?
          }
        };
        xhr.open('POST', form.action, true);
        xhr.send(formData);
        event.preventDefault();
      }
    }, false);
  }
}
</script>
</head>
<body onload='init()'>
<?php
  if(isset($_FILES['file'])) {
    echo '<ul>';
    echo '<li>name: '.$_FILES['file']['name'].'</li>';
    echo '<li>type: '.$_FILES['file']['type'].'</li>';
    echo '<li>size: '.$_FILES['file']['size'].'</li>';
    echo '<li>upload type: '.$_POST['ajax'].'</li>';
    echo '</ul>';
    echo "<a href='http://localhost/test.php'>reset</a>";
  }
  else {
?>
<form enctype='multipart/form-data' id='f' method='POST'>
<input name='file' type='file'/>
ajax: <input name='ajax' type='checkbox'/>
<input type='submit'/>
</form>
<?php
  }
?>
</body>
</html>

【讨论】：