1

我将带有角度的照片上传到后端（Core 2.2），但出现错误。当我选择照片并单击上传时，这就是我得到的： 照片 1

而且我不知道为什么我得到： POST http://localhost:4200/ undefinedusers /4/photos 它应该只是没有undefined的用户

当我点击 Zone.js.3372 这就是我得到的： 照片 2 当我使用 Postman 时一切正常，图片保存在 cloudinary 网站上，所以问题出在客户端的某个地方。

这是将图像上传到服务器的部分。

   export class PhotoEditorComponent implements OnInit {
  @Input() photos: Photo[];
   uploader: FileUploader ;
   hasBaseDropZoneOver = false;
  apiUrl: 'http://localhost:5000/api/';

  constructor(private authService: AuthService) { }
  ngOnInit() {
    this.initializeUploader();
  }
  public fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }
  initializeUploader() {
    this.uploader = new FileUploader({
      url: this.apiUrl + 'users/' + this.authService.decodedToken.nameid + '/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,
          dataAdded: res.dataAdded,
          description: res.description,
          isMain: res.isMain
        };
        this.photos.push(photo);
      }
    };
  }

这是html：

<div class="row">
   <div *ngFor="let photo of photos" class="col-sm-2">
    <img src="{{photo.url}}" class="img-thumbnail p-1" alt="">
    <div class="text-center">
      <button type="button" class="btn btn-sm">main</button>

      <button type="button" class="btn btn-sm btn-danger"> <i class="fa fa-trash-o"></i></button>
    </div>
   </div>
</div>



<div class="row mt-3">
  <div class="col-md-3">
      <h3>Add Photos</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>
           Drop Photos here
      </div>
      Multiple
      <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>
      Single
      <input type="file" ng2FileSelect [uploader]="uploader" />
  </div>
  <div class="col-md-9" style="margin-bottom: 40px" *ngIf="uploader?.queue.length">
      <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>
          <div>
              Queue progress:
              <div class="progress mb-4" >
                  <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 
          </button>
          <button type="button" class="btn btn-warning btn-s"
                  (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
              <span class=" fa fa-ban"></span> Cancel 
          </button>
          <button type="button" class="btn btn-danger btn-s"
                  (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
              <span class="fa fa-trash"></span> Remove 
          </button>
      </div>

  </div>

</div>
4

0 回答 0