FileReader 在 Angular 2 中不起作用

现在住

我正在尝试使用 上传图像FileReader,它在调试模式下工作正常(在行上设置断点时this.name = Image.files[0].name;),但如果我停用断点则不起作用。testDetails.image设置为空字符串。我也试过setTimeout,也不行。

var fileByteArray = '';
const Image = this.AccUserImage.nativeElement;

if (Image.files && Image.files[0]) {
    this.AccUserImageFile = Image.files[0];
}


var fileReader = new FileReader();
fileReader.onload = function (event) {
    var imageData = fileReader.result;
    var bytes = new Uint8Array(imageData);
    //for (var i = 0; i < bytes.length; i++) {
    for (var i = 0; i < bytes.length; ++i) {
        fileByteArray += (String.fromCharCode(bytes[i]));
    }
};
if (fileReader && Image.files && Image.files.length) {
    fileReader.readAsArrayBuffer(Image.files[0]);
    }
}

this.name = Image.files[0].name;
const ImageFile: File = this.AccUserImageFile;

let length = this.form.value.addresses.length;
this.testList = [];
for (let i = 0; i < length; i++) {
    let testDetails = new testDto();
    testDetails.image = btoa(fileByteArray);
}
现在住

当前的实现中存在一些问题,我在下面发布了工作代码。第一个问题是我使用了 JavaScript 风格的onload函数调用第二个问题是我必须将所有代码都放在onload函数中,因为它readAsArrayBuffer是一个异步调用。

var fileByteArray = '';
const Image = this.AccUserImage.nativeElement;
if (Image.files && Image.files[0]) {
    this.AccUserImageFile = Image.files[0];
}
var fileReader = new FileReader();

fileReader.onload = (e) => {
    var imageData = fileReader.result;
    var bytes = new Uint8Array(imageData);
    for (var i = 0; i < bytes.length; ++i) {
        fileByteArray += (String.fromCharCode(bytes[i]));
    }

    this.name = Image.files[0].name;
    const ImageFile: File = this.AccUserImageFile;
    let length = this.form.value.addresses.length;
    this.testList = [];
    for (let i = 0; i < length; i++) {
        testDetails.image = btoa(fileByteArray);
    }
}
fileReader.readAsArrayBuffer(Image.files[0]);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

图像上传器 FileReader 在 angular 6 中不起作用

来自分类Dev

EventEmitter在Angular 2中不起作用

来自分类Dev

jquery 在 Angular 2 中不起作用?

来自分类Dev

FileReader Angular 2

来自分类Dev

FileReader onload不在控制器范围Angular 2中

来自分类Dev

用于textarea的ngModel在angular 2中不起作用

来自分类Dev

Angular2中的SystemJS defaultExtension不起作用

来自分类Dev

systemjs在angular2-rc1中不起作用

来自分类Dev

Angular 2 Beta –选择不起作用(Chrome中除外)

来自分类Dev

动态样式在Angular2中不起作用

来自分类Dev

路由在Angular2中不起作用

来自分类Dev

Phonegap中的Angular 2不起作用(纯JavaScript)

来自分类Dev

图表在Angular2中不起作用

来自分类Dev

图表在Angular2中不起作用

来自分类Dev

systemjs在angular2-rc1中不起作用

来自分类Dev

goBack按钮在Angular2的Safari中不起作用

来自分类Dev

POST方法在Angular2中不起作用

来自分类Dev

ngNonBindable在angular-2中不起作用

来自分类Dev

属性在ngModel(Angular 2)中不起作用,错误

来自分类Dev

onInit中的Angular2动画不起作用

来自分类Dev

angular2中的选择标签不起作用

来自分类Dev

离子输入在 ngIf angular 2 中不起作用

来自分类Dev

Bootstrap 表单验证在 angular2 中不起作用

来自分类Dev

共享服务在 angular 2 中不起作用

来自分类Dev

ngFor 中的 Angular 2 NgModel+ 值不起作用

来自分类Dev

外部链接在 Angular 2 中不起作用

来自分类Dev

Http Get catch 在 angular 2 中不起作用

来自分类Dev

Angular 2 of-class 在 IE 11 中不起作用

来自分类Dev

Backspace 在 Firefox Angular 2 中不起作用