angular前端获取电脑本地文件file相应操作

最新推荐文章于 2024-08-25 17:59:01 发布

鸭绒

最新推荐文章于 2024-08-25 17:59:01 发布

阅读量3k

点赞数 2

本文链接：https://blog.csdn.net/weixin_43334673/article/details/104910418

版权

本文介绍了在Angular应用中实现文件上传的功能，包括通过HTML5的input[type='file']选择本地文件，利用change事件获取文件信息，使用URL.createObjectURL()生成预览URL，以及如何将图片转换为base64格式进行预览。此外，还讨论了如何美化上传文件的样式，使其看起来更符合设计需求。

摘要由CSDN通过智能技术生成

1.想在应用添加上传本地文件怎么办？很简单

<div class="container">
<img id="Img" class="Img" *ngIf="isShow" [src]="imgData"/>
<input type="file" id="input" (change)="getPicture($event)" accept="image/*"/>
</div>

HTML5中关键是input标签的type="file"起作用，有了该定义就可以进入选择本地文件页面，当选择文件就会触发change()方法,标签的accept属性是定义上传文件的类型，若不定义则可以选择任意类型，以上定义就是可以上传任意类型图片
以下是一些简单的样式

.container{
   
    position: relative;
    left:50%;
    width: 300px;
    height:525px;
    transform: translate(-50%);
    border: 1px solid wheat;
    display: flex;
    flex-direction:column;