2

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

2）我使用 blob url 预览图像，但在控制器中我尝试了 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);
            });
        },
4

0 回答 0