Question

我正在尝试使用Angular 8将图像（.png，.svg，.jpeg）发布到文件目录端点。

我研究了这个tutorial，并执行了该帖子，但发送的内容是空的。我感到困惑的是，当我在控制台中记录this.fileData时，我获得了要显示的正确信息，但没有得到发送。

我在做什么错？我将显示一些代码和控制台的屏幕截图，以显示正在发生的情况。

.component.ts

import { Component, OnInit, AfterViewInit, ViewChild} from '@angular/core';
import { Config } from '../config';
import { ConfigService } from '../config.service';
import { environment } from '../environments/environments';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit, AfterViewInit {

  fileData: File = null;
  previewUrl: any = null;
  selectedImage: File = null;

  constructor(private configService: ConfigService) { }

  fileProgress(fileInput: any) {
    this.fileData = <File>fileInput.target.files[0];
    this.preview();
  }

  preview(){
    var mimeType = this.fileData.type;
    if(mimeType.match(/image\/*/)==null){
      return;
    }
    var reader = new FileReader();
    reader.readAsDataURL(this.fileData);
    reader.onload = (_event) => {
      this.previewUrl = reader.result;
    }
  }

  ngOnInit() {
    this.getConfig();
    this.imageUrl = environment.image_url;
  }

  ngAfterViewInit(){}

  uploadImage(){
    const formData = new FormData();
    formData.append('file', this.fileData)
    console.log(this.fileData);
    this.configService.uploadImage({title: '', name: 'Image', data: formData})
    .subscribe(response => {
      console.log(response);
    })
  }
}

.component.html

<ng-container *ngIf="show_form['club_badge']">
  <input type="file" name="club_badge" (change)="fileProgress($event)" accept=".jpg,.svg,.png,.jpeg">
  <div class="image_preview" *ngIf="previewUrl">
     <img [src]="previewUrl | safe:'resourceUrl'">
  </div>
  <button class="update"(click)="uploadImage()">Upload</button>
</ng-container>

console.log响应并单击事件

网络标签有效负载请求

我看到发布请求完成后，文件目录中已注册了某些内容，但它显示为空文件类型。如果我在输入上使用ngModel，则上升的文件为纯文本。如何获取此文件以进行发布？有人可以在这里发现我做错了什么吗？

Answer 1

弄清楚为什么它不起作用。

需要将文件转换为base64，然后2.将文件名显式定义为name.jpg或name.png

uploadImage（）{ 让文件= this.fileData; 让reader = new FileReader（）; reader.readAsDataURL（file）; reader.onload =（）=> { 让数据= reader.result; console.log（'文件数据'，数据）; this.configService.uploadImage（{title：``，name：'image.jpg'，type：'image / jpeg'，data}） .subscribe（response => { console.log（response）; }） } reader.onerror =（错误）=> { console.log（'错误'，错误）; } }

为什么不将FormData发送到Angular 8中的端点？

1 个答案: