ng2-file-upload获取上传文件名实例

<div class="row">
    <div class="col-sm-12">
        <div class="card card-body">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <form class="form" role="form" (ngSubmit)="updatePartner()">
                        <div class="form-group m-t-40 row">
                            <label for="inputHorizontalSuccess"
                                class="col-2 col-form-label">合作伙伴</label>
                            <div class="col-sm-4">
                                <input type="email" class="form-control form-control-success"
                                    id="partnerName" name="partnerName" [(ngModel)]="partner.partnerName" placeholder="合作伙伴">
                            </div>
                            <label for="inputHorizontalSuccess"
                                class="col-sm-2 col-form-label">官网</label>
                            <div class="col-sm-4">
                                <input type="email" class="form-control form-control-success"
                                    id="partnerNetwork" name="partnerNetwork" [(ngModel)]="partner.partnerNetwork" placeholder="官网">
                            </div>
                        </div>
                        <div class="form-group m-t-40 row">
                            <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">图标</label>
                            <div class="col-sm-4">
                                <input type="file" id="myuploader" name="myuploader" [(ngModel)]="partner.partnerLogo" ng2FileSelect [uploader]="uploader" />
                            </div>
                            <div class="col-sm-4">
                                
                                <button type="button" class="btn btn-success btn-s"
                                        (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                                    <span class="glyphicon glyphicon-upload"></span> 上传
                                </button>
                                <button type="button" class="btn btn-warning btn-s"
                                        (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
                                    <span class="glyphicon glyphicon-ban-circle"></span> 取消
                                </button>
                                <button type="button" class="btn btn-danger btn-s"
                                        (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                                    <span class="glyphicon glyphicon-trash"></span> 删除
                                </button>
                                
                            </div>
                            
                        </div>
                        <div class="form-group m-t-40 row">
                            <label for="inputHorizontalSuccess"
                                class="col-sm-2 col-form-label">状态</label>
                            <div class="col-sm-4">
                                <input type="email" class="form-control form-control-success"
                                    id="partnerState" name="partnerState" [(ngModel)]="partner.partnerState" placeholder="状态">
                            </div>
                        </div>
                        <div class="form-group m-t-40 row">
                            <div class="col-sm-12 text-center">
                                <button type="submit" class="btn btn-info waves-effect waves-light m-r-10"><i class="fa fa-save"></i> 保存</button>
                                <button type="submit" class="btn btn-inverse waves-effect waves-light"  [routerLink]="['/business/partner']"><i class="fa fa-reply"></i> 返回</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

 

import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';

import { Router } from '@angular/router';

import { ActivatedRoute } from '@angular/router';

import { Partner } from './partner';
import { PartnerService } from './partner.service';

import { FileUploader, FileItem, ParsedResponseHeaders } from 'ng2-file-upload';

import { ToastsManager } from 'ng2-toastr/ng2-toastr';

// const URL = '/api/';
const URL = 'http://localhost:9000/partner/upload';

declare var require: any;

@Component({
  selector: 'partner-form',
  templateUrl: './partner-form.component.html',
   styleUrls: ['./partner-form.css']    
    
})
export class PartnerFormComponent implements OnInit {
    
  public uploader:FileUploader = new FileUploader({url: URL});
  
  public hasBaseDropZoneOver:boolean = false;
  public hasAnotherDropZoneOver:boolean = false;
 
  public fileOverBase(e:any):void {
    this.hasBaseDropZoneOver = e;
  }
 
  public fileOverAnother(e:any):void {
    this.hasAnotherDropZoneOver = e;
  }
  
  
  id: string;  

  partner: Partner;
  
  filePath: string;
  
  partnerLogoUuid: string;

  constructor(private router: Router, private route: ActivatedRoute, private partnerService: PartnerService, 
      public toastr: ToastsManager, vcr: ViewContainerRef) {
      debugger
    route.params.subscribe(params => {this.id = params['id'];});
    this.partner = new Partner();
    this.toastr.setRootViewContainerRef(vcr);
  }
    
  /**
   *    初始化方法
   */
  ngOnInit() {
    debugger
    this.setPartner();
      
    this.uploader = new FileUploader({
    url: URL,   
    method: "POST",    
    itemAlias: "myuploader"
    });
    
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onSuccessItem = this.successItem.bind(this);
  }
    
  setPartner(){
    if (this.id != '0') {
      this.partnerService.getPartner(this.id).subscribe(partner => {
        debugger
        this.partner = partner;
      });
    } else {
      this.partner = new Partner();
    }
  }
    
  successItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders):any{
      // 上传文件成功  
      if (status == 200) {
        // 上传文件后获取服务器返回的数据
        let tempRes = JSON.parse(response);
        this.fileName = tempRes.fileName;
        this.filePath = tempRes.filePath;
        this.toastr.success('上传成功!');  
      }else {            
        // 上传文件后获取服务器返回的数据错误        
      }
      console.info(response+" for "+item.file.name + " status " + status);
  }

  updatePartner(){
    debugger
    if (this.fileName != null) {
      this.partner.partnerLogo = this.fileName;
      this.partner.partnerLogoUuid = this.filePath;
    }
    
    if (this.partner.partnerId != null) {
      this.partnerService.update(this.partner).subscribe(data => {
        });
        this.toastr.success('修改保存成功!');
    } else {
      this.partnerService.add(this.partner).subscribe(data => {
        });
        this.toastr.success('新增保存成功!');
    }
    //this.router.navigate(['/business/partner']);
  }
    
}
 

猜你喜欢

转载自blog.csdn.net/daqiang012/article/details/82531981
今日推荐