Question

使用Angular 6通过Valor Software的ng2文件上传器将图片上传到服务器，并且始终出现错误。事实是，我之前在Visual Studio Code中使用了ng2文件上传器，但效果很好。该项目是从带有.NET Core和Angular捆绑包的Visual Studio 2017开始的，我想知道这是否与为什么它不能相同（或几乎一样容易）一起工作有关。

我在package.json中使用"ng2-file-upload": "^1.3.0"。

我已在模块的import数组中导入并声明了import { FileUploadModule } from 'ng2-file-upload';。

我的html：

<div class="row">
  <div class="col-12">
    <h3>Upload queue</h3>
    <p>Queue length: {{ uploader?.queue?.length }}</p>
    <table class="table">
      <thead>
        <tr>
          <th width="50%">Name</th>
          <th>Size</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 class="progress mb-4">
      <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
    </div>
  </div>
  <div class="col-12">
    <div ng2FileDrop
         [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
         (fileOver)="fileOverBase($event)"
         [uploader]="uploader"
         class="well my-drop-zone">
      Base drop zone
    </div>
  </div>
</div>

我的component.ts：

export class PhotoEditorComponent implements OnInit {
  @Input() photos: Photo[];
  baseUrl = environment.levanaBaseUrl;
  uploader: FileUploader;
  hasBaseDropZoneOver = false;

  constructor(private auth: AuthService,
    private userService: UserService) { }

  ngOnInit() {
  }

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

  initializeUploader() {
    this.uploader = new FileUploader({
      url: this.baseUrl + 'users/' + this.auth.currentUser.id + '/photos',
      authToken: 'Bearer ' + localStorage.getItem('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 res: Photo = JSON.parse(response);
        const photo = {
          id: res.id,
          url: res.url,
          dateAdded: res.dateAdded,
          description: res.description,
          isMain: res.isMain
        };
        this.photos.push(photo);
        if (photo.isMain) {
          localStorage.setItem('user', JSON.stringify(this.auth.currentUser));
        }
      }
    };
  }

}

当html呈现混乱状态时，我总是收到这些错误。

Answer 1

您有一个名为initializeUploader的函数，您永远不会在任何地方调用它。我怀疑从ngOnInit打电话可以解决您的问题。

Answer 2

在.module.ts文件中添加以下导入行

import { FileUploadModule } from 'ng2-file-upload';
import { CommonModule } from '@angular/common';

@NgModule({
....
  imports: [FileUploadModule,CommonModule],
....  
})

Angular 6 ng2-文件上传无法读取未定义的队列属性

2 个答案: