Question

上下文：我正在使用输入类型文件上传多个图像。然后，我为每个图像创建一个新对象以检索数据：大小，名称，base64Url。然后，我使用Ajax将对象列表发送到控制器，然后循环处理每个图像文件，以将图像信息保存到数据库（名称，图像路径，大小）。我的问题是我无法获得列表图像的所有base64值。在通过回调获取单张图片的base64值但进入循环之前，它没有触发事件读取器。循环中所有项目的加载，仅最后一个触发事件的加载。

2）我将blob url用于预览图像，但是在Controller中，我尝试使用Webclient.DownloadFile（url，path），它无法从blob url下载数据，因此我必须返回到base64值。

3）我也尝试过FormData，它可以将所有图像数据发送到控制器中的IFromFile，但是对于每个图像，我想在发送到控制器之前添加更多信息，例如（productId，颜色，数量，大小）。

这是我尝试过的所有方法，希望有人可以帮助我解决问题，或者为我提供另一种将多个图像发送到控制器的解决方案。

当我在base64Val值以下运行我的代码时，始终=''。下面的回调对于单个图像可以正常工作，但可以用于图像数组，reader.onload不会触发。

$('#btn-start-upload').on('click', function () {
    var listImgs = [];

    for (var i = 0; i < image.imgData.length; i++) {
            readImg(image.imgData[i], function (e) {
                listImgs.push(e.target.result);
            });
    }
});

回调：

 function readImg(file, onLoadCallback) {
            var reader = new FileReader();
            reader.onload = onLoadCallback;
            reader.readAsDataURL(file);
        },

我尝试调试，发现在base64Val从reader.result或e.target.result获取值之前，读取器尚未完成，因此'listImgs'为空或包含base64Val =''的列表。

更新2：

$('#btn-start-upload').on('click', function () {
               let productId = $('#productId').val();
            let listImgs = [];
            image.readFileList(image.imgData).then((value) => {
                listImgs.push(value);
            });
    });

    function readFileList(files) {
            return Promise.all(files.map(file => this.readFile(file))).then(contents => {
                return contents;
            });
        },

        function readFile(file) {
            return new Promise(resolve => {
                const fileReader = new FileReader();
                fileReader.onload = () => resolve(fileReader.result);
                fileReader.readAsText(file);
            });
        },

如何通过循环获取多个base64值

0 个答案: