Angular 6 文件上传预览仅在第二次上传后工作

共0个回答, 标签: angular typescript angular6

我用的是 6 号 Angular

我有简单的input type="file"将数据传递给 img scr,向我展示我需要上传的图像。

当我第一次选择图像时,什么也没有发生,当我第二次选择图像时,我确实看到了预览图像。

我错过了什么,为什么我第一次看不到图像预览?

我的 html




选择文件

{{消息}}



提交





我的打字稿

出口级 BottomSheetComponent 实施 OnInit {

令牌 = 这个 pzLogin。userLoginAccessToken;
公共图像;
ImgURL: any = this.phplogin.UserLoginClaims.ImageUrl;
公开消息: 字符串;
FileData = 新的 FileReader ();

构造函数 (
私 _ bottomSheetRef: MatBottomSheetRef,
私有 http: http 客户端,
私有本地存储服务: 本地存储服务) {}

/* OpenLink (事件: 鼠标事件): void {
该 _ bottomSheetRef。解雇)。
事件。 preventDefault ();
} */

NgOnInit () {

}

预览 (活动) {

如果 (事件.文件.长度 = = 0) {
退货;
}

文件 [0]。类型;
匹配 (/image \/*/) = = null) {
此。消息 = '仅支持图像。';
退货;
}

文件 [0]。大小;
如果 (文件大小> 200839) {
此消息 = “最大上传文件大小 200 kb”;
退货;
}

康斯特读卡器 = 新 FileReader ();
Reader.readAsDataURL (事件.文件 [0]);

Reader.onload = () => {
此。 imgURL = reader。结果;
此文件数据 = 事件文件;
};
}

() {
Formformdata = 新的 formData ();
FormData.append (“上传文件”,这个.fileData [0],这个.fileData [0].name);
表单数据。附加 (“令牌”,这个令牌);
这个。 http。post (“http://localhost: 11111/private zone zone/uploaduserimage”,formData)
。订阅 (res => {
控制台日志 ('res);
这。本地存储服务。 setItem (“用户登录声明”,res);
});
}
}

相关问题

从 angularcli 中的 HTTP Get 请求检索到的数组的范围 如何将角2前置快速 JS 变量导出到角2分量? Angular block web 请求使用的服务器吗? 在类实例中跟踪状态 如何解决: “找不到规则 '@ typescript-eslint/一致类型断言' 的定义” 如何将月份值从一个日期对象复制到另一个日期对象?[复制] 错误: 数据路径 “.builders ['app-shell']” 应该需要属性 “class” Angular 6 文件上传预览仅在第二次上传后工作