Question

美好的一天，有一个客户端服务器项目，机库上有一个客户端，树皮上有一个服务器。在服务器上，文件下载代码：

[HttpPost("[action]/{formData}"), Route("addfile")]
    public async Task AddFile(IFormFile formData)
    {


            string path = "/Files/" + formData.FileName;

            using (var fileStream = new FileStream(_appEnvironment.WebRootPath + path, FileMode.Create))
            {
                await formData.CopyToAsync(fileStream);
            }
            FileModel file = new FileModel { Name = formData.FileName, Path = path };
            db.Files.Add(file);
            db.SaveChanges();

    }

在客户端上：组件：

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpEventType } from '@angular/common/http';

@Component({
  selector: 'add-file',
  templateUrl: './add-files.component.html',

})

export class AddFilesComponent implements OnInit {

  fileData: File = null;
  previewUrl: any = null;
  fileUploadProgress: string = null;
  uploadedFilePath: string = null;
  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

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

  preview() {
    // Show 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;
    }
  }

  onSubmit() {
    let formData = new FormData();
    formData.append('files', this.fileData);

    this.fileUploadProgress = '0%';

    this.http.post('http://localhost:5000/api/file/addfile', formData, {
      reportProgress: true,
      observe: 'events'
    })
      .subscribe(events => {
        if (events.type === HttpEventType.UploadProgress) {
          this.fileUploadProgress = Math.round(events.loaded / events.total * 100) + '%';
          console.log(this.fileUploadProgress);
        } else if (events.type === HttpEventType.Response) {
          this.fileUploadProgress = '';
          console.log(events.body);
          alert('SUCCESS !!');
        }

      }) 
  }
}

HTML：

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <h3>Choose File</h3>
      <div class="form-group">
        <input type="file" name="image" (change)="fileProgress($event)" />
      </div>
      <div *ngIf="fileUploadProgress">
        Upload progress: {{ fileUploadProgress }}
      </div>
      <div class="image-preview mb-3" *ngIf="previewUrl">
        <img [src]="previewUrl" height="300" />
      </div>

      <div class="mb-3" *ngIf="uploadedFilePath">
        {{uploadedFilePath}}
      </div>

      <div class="form-group">
        <button class="btn btn-primary" (click)="onSubmit()">Submit</button>
      </div>
    </div>
  </div>
</div>

注意：如果仅在皮质中实现所有内容，则所有内容均正常运行，文件被加载，因此所有内容均与代码一致。问题是文件不是来自服务器，而是在客户端传递了一个断点，文件被发送，我在服务器上放置了一个断点，我以一种新的方式启动了一切，这是一种反应，即客户端在服务器上启动该方法，但是我看到IFormFile formData为空，这意味着没有任何可保存的..我觉得我在一些小事情上犯了一个错误，请问哪里...

Answer 1

您需要更改参数名称以对应files，将操作更改为

[HttpPost("[action]"), Route("addfile")]
public async Task AddFile([FromForm]IFormFile files)

无法将文件上传到服务器

1 个答案: