zoukankan      html  css  js  c++  java
  • angular 8 表单带文件上传接口

    <div id="homework">
    
        <form (ngSubmit)="doSubmit()" enctype="multipart/form-data">
    
                        <mat-label>作业标题</mat-label>
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <input name="title" required [(ngModel)]="homeWork.title">
            <br>
    
                        <mat-label>作业内容</mat-label>
                        <textarea name="description" [(ngModel)]="homeWork.description" max-rows="4"></textarea>
            <br>
                        <mat-label>文件</mat-label>
                        <input name="file" type="file" (change)="upload($event)">
            <br>
    
            <button *ngIf="homeWork.id !== ''"
                    aria-label="Delete"
                    matTooltip="Delete">
                DELETE
            </button>
    
            <input type="submit" aria-label="SAVE" value="SAVE">
    
        </form>
    
    </div>
    

      

        upload(e): void{
            this.file = e.target.files[0];
        }
    
        doSubmit(): void {
            const formData: FormData = new FormData();
    
            formData.append('file', this.file);
            formData.append('id', this.homeWork.id);
            formData.append('title', this.homeWork.title);
            formData.append('description', this.homeWork.description);
            formData.append('teacher_id', this.authentication.id);
            formData.append('course_id', this.courseId);
    
            this._courseService.updateHomeWork(formData).then( (res) => {
                alert(res.msg);
            } );
    
    
        }
    

      

        /**
         * 保存或者更新老师布置的作业
         * @param formData ,老师布置的作业
         */
        updateHomeWork(formData ): Promise<any>
        {
            return new Promise((resolve, reject) => {
                const header: HttpHeaders = new HttpHeaders();
                header.set('Content-Type', 'multipart/form-data');
                this._httpClient.post(this._fuseConfigService.configSnapshot.url + '/api.php/rest/homeworks/file',
                    formData,
                    {headers: header }
                    )
                    .subscribe(response => {
                        // 添加成功后重新获取最新的作业信息
                        this.getHomeWork();
                        resolve(response);
                    });
    
            });
        }
    

      

  • 相关阅读:
    Linux配置java环境
    三级联动的实现
    Linux安装
    省市区县的sql语句——城市
    shiro登陆权限验证
    省市区县的sql语句——区县
    Linux安装Jenkins
    省市区县的sql语句——省
    读《世界是数字的》有感
    读《我是一只IT小小鸟》有感
  • 原文地址:https://www.cnblogs.com/fpcing/p/12017425.html
Copyright © 2011-2022 走看看