事情是这样的。
我要做一个上传按钮。产品经理不让用花里胡哨的NG组件库,那我只好自己写input上传了。由于button包不住input。那我就搞了邪道。
<button
nz-button
nzType="primary"
(click)="clckInputElement(uploadFileElement)"
>上传报告
<input
#uploadFileElement
type="file"
(change)="handleChange($event)"
style="display:none"
id="uploadThirdPartReports"
accept="application/pdf"
multiple
</button>
clckInputElement(e) {
// 通过模板变量来点击input
e.click();
}
input直接隐藏,通过ts,点击button相当于点击input,跳出文件框。
接下来我获取的是模版变量#uploadFileElement ,相当于直接拿到了这个Dom对象。
run
结果是输出了一段html文本。打开谷歌,提示说HTMLElement没有files方法。于是在es6里找了下有files属性的类型,是HTMLInputElement类型。于是就强制它转换成这个类型。
const uploadsFile=<HTMLInputElement>document.getElementById(name).files[0];
那么我下一步操作是获取文件的arrayBuffer我就直接
const uploadsFile=<HTMLInputElement>document.getElementById(name).files[0].arrayBuffer();
发现没毛病,的到一个Promise,然后我继续than,提示错误 arrayBuffer() is not a function
原因:TS语法检查不知道你是什么东西,自然无法知道他的原型链
解决方案:继续判定类型,先为unkonw 再为promise
const fileBytesAsPromise = <HTMLInputElement>e.target.files[i].arrayBuffer() as unknown as Promise<File>;
后续的链式操作同理。先定义其类型,让TS知道其原型。
2022/5/31 复盘
Angular2里获取(input file)上传文件的内容的方法 | 内容Angular2里获取(input file)上传文件的内容的方法, 内容的个人空间.https://www.lmlphp.com/user/16745/article/item/577910/这个哥们和我遇到了同样的问题,通过value来解决也不失为一种好方法。
2022/6/1
👴 终于解决了这个task,前端跑到后端没毛病。经历了:
1.建实体
2.建各种Dto
3.EFcore映射
4.写接口,前后连调
5.各种疑难杂症
6.增加对产品经理对怨念 : (
7.前端造轮子,写样式