Vue用axios发送base64，但是为null

Question

我有一个表单，我需要发送几个图像，所以我在 Base64 中转换每个图像，如下所示，该对象存在，但是当我访问 network 来自开发者工具，对象是空的！有人知道为什么会这样吗？ Console.log of object

vue中的post方法

this.topografiaItems.forEach(function(topografia) {
                    topografia.anexos.forEach(function(anexo, index) {
                        let reader = new FileReader();
                        reader.readAsDataURL(anexo);
                        reader.onloadend = function () {
                            topografia.anexos[index] = reader.result;
                        };
                        reader.onerror = function () {
                          console.log('Error', error);
                        };
                    });
                });

                console.log(this.topografiaItems);
                axios.post(this.path, this.topografiaItems,{
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then( (response) => {
                   console.log(response);
                });

Answer 1

reader.readAsDataURL(anexo); 是异步的。 forEach 循环是同步的。 axios.post 发生在实际加载数据之前。 一种解决方案是使用 promise 包装器和 for of iterator 等待

类似https://codesandbox.io/embed/cranky-cherry-oxvhg