将图像数组转换为 blob 格式并使用 PHP 进行渲染

Question

我正在尝试将图像数组转换为 blob 格式并发送到脚本 php 以处理数据，但 blob 数组未正确发送，我不知道为什么。 我在 html 中的输入是这样的：

<div class="form-group">
<input id="imagen" onchange="send()" type="file" name="imgs" multiple="true" class="form-control required" >
</div>

我的 javascript 脚本是这样的：

<script>
    var y='#imagen';
    var z;        
    var blobs;
    function send(){
        x=trans(y); 
        };

    function trans(v) {
        var file    = document.querySelector(v).files;

        for (i = 0; i < file.length; i++) {
            var reader  = new FileReader();
            reader.readAsDataURL(file[i]);
            reader.onloadend = function () {
            blobs[i]=reader.result;
            }
        }
        console.log(blobs.length);

        }
</script>

我正在尝试通过 ajax 调用将数组 blob 发送到脚本 php：

var form = $('#for_addH')[0];
                var formData = new FormData(form);
                 formData.append("blobs",JSON.stringify(blobs));
                $.ajax({
                type: "POST",
                url: "phpfunc/posadas/nueva_habitacion.php",
                contentType:false,
                processData:false,
                cache:false,
                data: formData,
                timeout: 180000
            })

所以，我的问题是数组没有正确发送。请帮忙。

Answer 1

您连接的是data URIs，而不是Blobs。

如果实际需要发布串联data URIs 的字符串化数组，您可以使用立即调用的函数表达式。 FileReader loadend 事件异步返回结果。您可以将 i 传递给 IIFE，以在 for 循环中保留 i 引用

function trans(v) {
    var file    = document.querySelector(v).files;

    for (i = 0; i < file.length; i++) {
      (function(curr) {
        var reader  = new FileReader();
        reader.readAsDataURL(file[curr]);
        reader.onloadend = function () {
          blobs[curr]=reader.result;
        }
      })(i);
    }
    console.log(blobs.length);

}