javascript - 角度图像上传不适用于 Internet Explorer,但它适用于谷歌浏览器
问题描述
我已经成功实施,适用于除 Internet Explorer 11 以外的所有浏览器。我正在使用 Internet Explorer 11,并且我已实施我已成功在 Google Chrome 中上传.jpeg、.jpg 和 .png图像,但无法在 IE 中上传11
此代码在谷歌浏览器开发和生产中完美运行,但在 IE11 中无法正常工作,
我可以在谷歌浏览器中上传 jpeg、jpg、png 所有尺寸的图像,但无法在 IE11 中上传任何类型的图像。
<div class="form-group">
<label class="form-control-label" jhiTranslate="companyManagement.new-logo">Upload new Logo</label>
<input class="tdw-display-none" (change)="onFileChange($event, 'logo')" type="file"
formControlName="logo" placeholder="Company logo">
onFileChange($event, doc: string) {
const files = $event.target.files;
if (files && files.length > 0) {
const fileType: string = files[0].type;
const fileSize: number = files[0].size;
if (fileType) {
if (fileType.includes('png') || fileType.includes('jpeg') || fileType.includes('jpg')) {
this.image.name = files[0].name;
this._compressImage(files[0], fileData => {
this.image.data = fileData;
this._mLogo = fileData;
this.company.logo = fileData.split(',')[1];
});
} else {
console.log('--------------Invalid File Type----------');
}
}
}
}
private bytesToSize(bytes) {
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes === 0) {
return 'n/a';
}
const i = Math.floor(Math.log(bytes) / Math.log(1024));
if (i === 0) {
return bytes + ' ' + sizes[i];
}
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
}
private _compressImage(file, callback) {
this.ng2ImgMaxService.resize([file], 600, 600).subscribe(
result => {
this._readImageAndLoad(result, callback);
console.log("after _readImageAndLoad");
},
error => {
console.error('---------------Resize error-------------', error);
}
);
}
private _readImageAndLoad(file, callback) {
const reader = new FileReader();
reader.onload = (e: any) => {
const dataUrl = e.target.result;
const base64 = dataUrl.split(',')[1];
console.log(" _readImageAndLoad");
callback(dataUrl);
};
reader.readAsDataURL(file);
}
解决方案
您正在使用箭头函数( the () => {}
)。
IE11 不支持它们,因此您必须将它们更改为旧的实现方式。例子:
error => {
console.error('---------------Resize error-------------', error);
}
//Should be
function(error) {
console.error('---------------Resize error-------------', error);
}
推荐阅读
- user-interface - 重新创建 Pinterest UI Flutter
- c# - 关闭代码文件时自动折叠区域
- angular - 带有可重用子组件示例的 Angular 8 反应式表单
- notepad++ - 大型 .A2L 文件,引用的翻译问题
- mysql - MySQL:如何在客户端和服务器端都启用本地加载数据
- angular - 对返回 ValidatorFn[] 类型的函数进行单元测试
- php - 当我在其他文件中调用它们时,类静态变量会重置
- java - Java Hibernate 的主键有问题吗?
- java - JDBC 拒绝使用指定的密码
- javascript - React Native,Javascript 如何自定义 android 键盘