0

使用 Angular 6 通过 Valor Software 的 ng2 文件上传器将图片上传到服务器并不断出错。问题是，我之前在 Visual Studio Code 中使用过 ng2 文件上传器，它运行良好。这个项目是从带有 .NET Core 和 Angular 包的 Visual Studio 2017 开始的，我想知道这是否与为什么它的运行方式不同（或几乎一样容易）有关。

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

我已经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>

我的组件.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 渲染一切混乱时，我总是会遇到这些错误。

在此处输入图像描述

4

2 回答 2

0

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

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

@NgModule({
....
  imports: [FileUploadModule,CommonModule],
....  
})
于 2019-06-25T03:03:45.490 回答
0

你有一个函数initializeUploader，你永远不会在任何地方调用。我怀疑调用 fromngOnInit会解决你的问题。

于 2019-05-31T22:47:16.503 回答