Javascript 为什么从该异步函数中删除console.log调用会导致它上载黑色图像？

我最近遇到了一些奇怪的行为，我想我应该和大家分享一下

我一直在为我内置的应用程序的用户配置文件部分上传图像。我有一个用于选择、裁剪/调整大小以及上传用户选择的图像的工作系统，因此我开始清理代码，删除

控制台.log

s。嗯，我很沮丧地发现它不再工作了，上传了一个纯黑色的图像，所以我做了显而易见的撤销我的更改，直到它再次工作

总而言之，我把它缩减为一行，它改变了它是否工作，一个单数

console.log

语句。下面，您将看到两个非常相似的工作和非工作版本。我想听听你们为什么认为会这样

不工作：

const imageBlob: Blob = (await getCroppedImg(imageElement!, crop)) as Blob;
const { data: { requestImageUpload: { putURL, upload: { id: uploadId } } } } = await requestUpload({
    variables: {
        filename: selectedImage?.name!,
        mimetype: imageBlob.type
    }
});

await (new Promise((resolve, reject) => {
    var oReq = new XMLHttpRequest();
    oReq.open("PUT", putURL, true);
    oReq.onload = function (e) {
        resolve(null);
    };
    oReq.onprogress = function (e) {
        let percent = (e.loaded / e.total) * 100;
        setUploadProgress(percent);
    };
    oReq.onerror = function (e) {
        reject(null);
    };
    oReq.send(imageBlob);
}))

工作：

const imageBlob: Blob = (await getCroppedImg(imageElement!, crop)) as Blob;
const { data: { requestImageUpload: { putURL, upload: { id: uploadId } } } } = await requestUpload({
    variables: {
        filename: selectedImage?.name!,
        mimetype: imageBlob.type
    }
});
console.log(imageBlob)
await (new Promise((resolve, reject) => {
    var oReq = new XMLHttpRequest();
    oReq.open("PUT", putURL, true);
    oReq.onload = function (e) {
        resolve(null);
    };
    oReq.onprogress = function (e) {
        let percent = (e.loaded / e.total) * 100;
        setUploadProgress(percent);
    };
    oReq.onerror = function (e) {
        reject(null);
    };
    oReq.send(imageBlob);
}))

还工作：

let imageBlob: Blob = (await getCroppedImg(imageElement!, crop)) as Blob;
const { data: { requestImageUpload: { putURL, upload: { id: uploadId } } } } = await requestUpload({
    variables: {
        filename: selectedImage?.name!,
        mimetype: imageBlob.type
    }
});

await (new Promise((resolve, reject) => {
    var oReq = new XMLHttpRequest();
    oReq.open("PUT", putURL, true);
    oReq.onload = function (e) {
        resolve(null);
    };
    oReq.onprogress = function (e) {
        let percent = (e.loaded / e.total) * 100;
        setUploadProgress(percent);
    };
    oReq.onerror = function (e) {
        reject(null);
    };
    oReq.send(imageBlob);
}))

第二个注意：有一个

console.log

调用。 第三个注意：我使用的是

let

而不是

const

。 没有错误，上传的图像是一个实际的JPEG，全部为黑色像素，大小为72 KB（这取决于原始图像）。它还具有与预期图像相同的尺寸

---

blob是否正在被垃圾收集，而它仍在被读取以便上传？

第一个和第三个代码之间有什么区别？我看不见it@FZs

const imageBlob

vs

let imageBlob

。我必须使用diff查看器才能找到它。从功能上来说，应该没有区别。我看不出这三者中的任何一个与其他人有什么不同。我怀疑这只是一个间歇性的问题，不特定于三段代码中的任何一段。typescript中有错误吗？没有抛出错误，也没有linting错误either@bigless当TypeScript编译成JavaScript时，它怎么可能是特定于它的呢？