Angular前端使用ts进行文件上传

最新推荐文章于 2025-07-05 19:54:48 发布

原创最新推荐文章于 2025-07-05 19:54:48 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Angular #Angularts #upload #Angular上传文件

HTML5 同时被 3 个专栏收录

54 篇文章

订阅专栏

angular

5 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了使用Angular实现的前端文件上传组件，包括HTML结构、TS代码逻辑及与后端的交互过程。组件通过FileUploader类实现文件选择、上传、进度显示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端代码：（样式请自行搞定）

<div class="file">
                        <div>请选择脚本文件</div>
                        <input id="p12" #fileUpload type="file" ng2FileSelect [uploader]="uploader" multiple (change)="selectedFileOnChanged($event)" style="cursor: pointer;" 
                         tabIndex="-1"/>
                    </div>
                    <span class="sp1">{{fileName}}</span>
                    <span class="sp1"  *ngFor="let item of uploader.queue">已上传：{{item.progress}}%</span>

ts代码部分：

选择中文件后自动运行selectedFileOnChanged()方法，通过uploader返回到后台，后台可以返回相应的属性，在successItem（）方法中获取，赋值。（由于本人所工作单位Java部分用的maven加上普通的mvc结构，就不贴后java代码了，一般公司不用我们这种结构）

uploader: FileUploader = new FileUploader({
        url: "/api/--------------",
        method: "POST",
        itemAlias: "sh",
        autoUpload: true,
        removeAfterUpload: true
    });

    selectedFileOnChanged(event) {
        // 这里是文件选择完成后的操作处理
        console.log("开始进行操作");
        this.uploader.uploadAll();
        console.log("开始进行操作1");
        this.uploader.onSuccessItem = this.successItem.bind(this);
        console.log("开始进行操作2");
        $("#p12").val("");
    }

    successItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any {
        let tempRes = JSON.parse(response);
        console.log(tempRes + "-------------");
        this.isadd = true;
        
        this.websuffix = item.file.name.substring(item.file.name.lastIndexOf("."));
        console.log("houzhui------" + this.websuffix + "-------------" + item.file.name );
        this.afteruuid = tempRes.backuuid;
        this.oldpath = tempRes.oldpath;
        console.log("huoqu--------------" + this.afteruuid + this.oldpath);
        this.fileName = item.file.name;
    }