Question

我正在尝试将请求后的文件发送到后端，它的响应状态为500 cuz，请求中没有文件->在检查出我的formData为空并且不包含任何文件后，

这是我的功能：

  createProductsByCsv(): void {
const self = this;
  const setting: any = {
    title: '<h5>Add Products By CSV file</h5>',
    html:
      '<div class="form-group row">\n' +
      '   <label class="col-sm-4 col-form-label">File</label>\n' +
      '       <div class="col-sm-8">\n' + '<input type="file" accept=".csv" name="csv-file" id="csv-file" class="form-control datepicker" placeholder="chose csv file">' +
      '       </div>\n' +
      '</div>',
    confirmButtonText: 'add the file',
    focusConfirm: false,
    showLoaderOnConfirm: true
  };

  setting.preConfirm = (text) => {
    var file = $('#csv-file').prop('files')[0];
    // console.log(file);

    var formData = new FormData();
    formData.append('file', file, file.name);
    console.log(formData);

    if(((file.name.split(".").length -1) > 1) && (file.name.endswith('.csv'))) 
      return self.sweetAlert.error({title: 'Error', text: "Upload only files that ends with .csv and containe single dot otherwise it will be ignored !"});
    else 
    return self.httpApi.post('/catalog/product/filetest',formData).toPromise()
      .then(resp => {
        if (resp.status == 200) {
          self.sweetAlert.success({title: 'Success', text: JSON.stringify(resp.message )});
        } else {
          self.sweetAlert.error({title: 'Error', text: JSON.stringify(resp.message )});
        }
      })
      .catch(msg => console.log('ERROR' + msg.message + ' ' + msg.message));
  };
  swal.queue([setting]); }

我做错什么了吗？

Answer 1

尝试这样：

.html

<input #fileInput type="file" accept=".csv" name="csv-file" id="csv-file" class="form-control datepicker" placeholder="chose csv file">

<button  (click)="saveFile(fileInput)">Upload</button>

.ts

 saveFile(fileInput) {
    let fi = fileInput;

    if (fi.files && fi.files[0]) {
      let fileToUpload = fi.files[0];

      let formData: FormData = new FormData();
      formData.append("file", fileToUpload);

      console.log(formData);
      ...
      // http call
    }
  }

Answer 2

我刚刚测试了这段代码，当将文件发布到laravel后端时，它可以正常工作。

我认为您的问题出在后端而不是前端，请检查您的后端Controller / Middleware功能是否接受' multipart / form-data < / strong>'

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {HttpClient} from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { @ViewChild('fileInput', {static: true}) fileInput: ElementRef; constructor( private httpclient: HttpClient ) {} ngOnInit(): void { } testUpload() { if (!this.fileInput.nativeElement.files.length) { console.log('there is no file to upload'); return; } const data = new FormData(); data.append('testFile', this.fileInput.nativeElement.files[0], this.fileInput.nativeElement.files[0].name); this.httpclient.post('http://localhost:8000/api/upload/test', data).subscribe((res: Response) => { console.log(res); }); } }

在将文件追加到FormData中后无法上传文件

2 个答案: