angular8中结合ali-oss分片上传报错

[cuideqi]

upload(event: any) { const file: File = event.target.files[0]; const name = file.name; // this.client 是已经构建好的OSS实例 this.client.multipartUpload(name, file, { partSize: 102400, }).then(res => { console.log(res); }); } 浏览器报错信息如下: Uncaught (in promise) TypeError: Method Promise.prototype.then called on incompatible receiver [object Object]at ZoneAwarePromise.then ()

报错图片链接如下: 报错信息

[cuideqi]

求助各位大佬，已经整了一天多了

[ZQ-jhon]

@PeterRao We are also facing this issue, please fix this. It makes our websites totally unuseable!

[wangzishi]

issues with Chrome v77

[cuideqi]

暂时找到解决办法如下： let client = new OSS({ ..., useFetch: false }) 不使用fetch，使用XMLhttpRequest

[wangzishi]

I think the issue related to the way of packaging OSS in browser environment. Removing the promise polyfills may eliminate the issue.

[wangzishi]

@PeterRao But I think it's not. https://github.com/eKoopmans/html2pdf.js/issues/220

[wangzishi]

Maybe this is helpful, FYI https://github.com/Microsoft/TypeScript/issues/15202#issuecomment-297518643

[ZQ-jhon]

暂时找到解决办法如下： let client = new OSS({ ..., useFetch: false }) 不使用fetch，使用XMLhttpRequest

方法可行，但是 @types/ali-oss 类型定义中缺失了对应的 field

[PeterRao]

调试了下和这个issue同样的问题，https://github.com/angular/angular/issues/32802 ，全局的Promise被ZoneAwarePromise覆盖了，ZoneAwarePromise中对stream的promise支持貌似有些问题。目前解决办法

1. 和 @cuideqi 提供的一样，暂时用callback，不用 fetch 的 stream 方式。
2. 替换掉ali-oss中所有系统的Promise，使用第三方的库。这种方式不太赞同。

   var _Promise = require('any-promise');

PS: 下个版本我们会考虑默认 disable 掉默认使用 fetch的方式，目前发现很多移动端设备对fetch支持性很差。

[wangzishi]

调试了下和这个issue同样的问题，angular/angular#32802 ，全局的Promise被ZoneAwarePromise覆盖了，ZoneAwarePromise中对stream的promise支持貌似有些问题。目前解决办法

1. 和 @cuideqi 提供的一样，暂时用callback，不用 fetch 的 stream 方式。
2. 替换掉ali-oss中所有系统的Promise，使用第三方的库。这种方式不太赞同。

var _Promise = require('any-promise');

PS: 下个版本我们会考虑默认 disable 掉默认使用 fetch的方式，目前发现很多移动端设备对fetch支持性很差。

或者可以提供一个方式能够让我们直接使用浏览器中提供的原生的 Promise？

[wangzishi]

ali-oss 这个包现在真的是太大太大的，刚刚看了看，没有 minify 的时候，149KiB/2.2MiB, 近乎95%+以上都是 polyfills，这个真的是太恐怖了。

[wangzishi]

即使是目标希望共用代码，是否可以选择让 node 去兼容 web 实现？例如使用 WHATWG URL、fetch api 以及 WebCrypto API 之类的呢？这些 polyfills 加在 node 环境中几乎是无关痛痒的事，但是在 web 环境中的真的影响很大。

[PeterRao]

下个版本就着手解决 浏览器版本体积问题。支持开发者使用tree shaking。 Promise 后续我增加一个 hack 方法绕过ZoneAwarePromise的问题。

[wangzishi]

@PeterRao aliasify 这个貌似早已不在维护，不支持甚多的 ES2015 语法，这阻碍了我们想要直接输出 target 更高的代码。需要自己写 crypto shim 是为了 md5 吗？

[disfeng]

暂时找到解决办法如下： let client = new OSS({ ..., useFetch: false }) 不使用fetch，使用XMLhttpRequest

可行！非常感谢，困扰了我一天