angular - 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]);
推荐阅读
- android - Android MP4parser 问题:android java.lang.IndexOutOfBoundsException:没有这样的设备
- angular - 单击垫子按钮时如何更改背景颜色 - Angular?
- r - R中PMG分析中的不平衡面板错误
- sql - 连接两张表,保留第一张表SQL的完整结构
- airflow - Apache Scheduler 无法正常工作 - 即使在重新启动网络服务器后
- java - 将 JFrame 中的所有内容渲染为 BufferedImage,然后处理此图像
- r - 使用for循环将数字转换为字符串
- r - 在阈值内将连续时间组合在一起以获得 R 中的 TimeGroup 输出
- java - 线程“main”中的异常 java.lang.NoClassDefFoundError 原因:java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory
- python - Azure 函数/事件中心和 Blob 输出绑定。如何有效地保存消息(Python)