嘗試在Angular中使用ng-upload上傳檔案時遇到“TypeError：無法讀取未定義的屬性（讀取“模因”）

我現在為此苦苦掙扎了一段時間。我正在嘗試使用 ng-upload 上傳影像，檔案保存在資料庫中，但是當上傳佇列結束時我收到“無法讀取未定義的屬性”。用于接收檔案的代碼：

上傳.html

 <div class="container text-center" *ngIf="memeUploadMode">
        <div class="row mt-3">
 
            <div class="col-md-3">
        
                <h3>Dodaj mema</h3>
        
                <div ng2FileDrop
                     [ngClass]="{'nv-file-over': hasBaseDropzoneOver}"
                     (fileOver)="fileOverBase($event)"
                     [uploader]="uploader"
                     class="card bg-faded p-3 text-center mb-3 my-drop-zone">
                     <i class="fa fa-upload fa-3x"></i>
                    Przeci?gnij mema tutaj
                </div>
        
                <input type="file" ng2FileSelect [uploader]="uploader" />
            </div>
        
            <div class="col-md-9" style="margin-bottom: 40px" *ngIf="uploader?.queue?.length">
        
                <h3>Kolejka</h3>
                <p>D?ugo?? kolejki: {{ uploader?.queue?.length }}</p>
        
                <table class="table">
                    <thead>
                    <tr>
                        <th width="50%">Nazwa</th>
                        <th>Rozmiar</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let item of uploader.queue">
                        <td><strong>{{ item?.file?.name }}</strong></td>
                        <td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                    </tr>
                    </tbody>
                </table>
        
                <div>
                    <div>
                        Queue progress:
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress   '%' }"></div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-success btn-s"
                            (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                        <span class="fa fa-upload"></span> Upload all
                    </button>
                </div>
        
            </div>
    </div>

這是我嘗試將影像添加到成員物件的代碼：

上傳.ts

constructor(public accountService: AccountService, private memberService: MembersService,
    private router: Router, private toastr: ToastrService) { 
      this.accountService.currentUser$.pipe(take(1)).subscribe(user => this.user = user);
  }

  ngOnInit(): void {
    this.initializeUploader();
  }

  fileOverBase(e: any) {
    this.hasBaseDropzoneOver = e;
  } 

  deletePhoto(photoId: number) {
    this.memberService.deletePhoto(photoId).subscribe(() => {
      this.member.photos = this.member.photos.filter(x => x.id !== photoId);
    })
  }

  initializeUploader() {
    this.uploader = new FileUploader({
      url: this.baseUrl   'users/add-meme',
      authToken: 'Bearer '   this.user.token,
      isHTML5: true,
      allowedFileType: ['image'],
      removeAfterUpload: true,
      autoUpload: false,
      maxFileSize: 10 * 1024 * 1024
    });

    this.uploader.onAfterAddingFile = (file) => {
      file.withCredentials = false;
    }

    this.uploader.onSuccessItem = (item, response, status, headers) => {
      if (response) {
        const meme: Meme = JSON.parse(response);
        this.member.memes.push(meme);
           this.user.memeUrl = meme.url;
           this.member.memeUrl = meme.url;
           this.accountService.setCurrentUser(this.user);
      }
    }
  }

    memeToggle() {
        this.memeUploadMode = !this.memeUploadMode;
    }

錯誤發生在這一行：

   this.member.memes.push(meme);

我已經看過類似的問題，但是沒有一個答案對我有幫助。我必須補充一點，我已經有一個類似的功能來添加用戶的照片，它的設定相同并且可以作業。任何幫助都會非常感謝。

干杯，菲利普

uj5u.com熱心網友回復：

你應該member在你的組件中定義

member = {
  memes: [],
  memeUrl: ''
};

uj5u.com熱心網友回復：

啊，對。我知道了。發生錯誤時，我的 Upload.ts 檔案中有這些：

@Input() member: Member;
  members: Member[];
  memes: Meme[] = [];
  model: any = {}
  uploader: FileUploader;

按照您的建議定義成員后，編譯器要求我也定義所有其他屬性。現在它起作用了，您是我的救星，我的好先生 :)

標籤：html 。网 有角的 打字稿

上一篇：C#-嵌套的LINQ查詢

下一篇：Asp.netCore3.1系結：在GET中使用字典作為引數的操作