在 Angular7 ASP .Net Core 2.1 中使用 ng2-file-upload 上传视频失败

Question

在我的项目中，我使用 ng2-file-upload 将照片和视频上传到 server.Photo 上传部分工作正常。但是视频文件大小不能超过 27MB upload.When 我调用 Uploader.UploadAll 方法然后上传方法隐藏并自动上传文件 canceled.In 浏览器控制台显示一个名为

的错误

Failed to load resource: net::ERR_CONNECTION_RESET

我要上传至少 100MB 的视频文件。

这是html代码

<div *ngIf="authService.currentUser && authService.currentUser.id == user.id" class="row mt-3">

  <div class="col-md-3">

      <h3>Upload files</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 Videos Here
      </div>

   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>

这是我的打字稿代码

initializeUploader() {
    this.uploader = new FileUploader({
      url: this.baseUrl + 'api/users/' + this.authService.decodedToken.nameid + '/videos',
      authToken: 'Bearer ' + localStorage.getItem('token'),
      isHTML5: true,
      allowedFileType: ['video'],
      removeAfterUpload: true,
      autoUpload: false,
      maxFileSize: 100 * 1024 * 1024

    });

    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };

    this.uploader.onSuccessItem = (item, response, status, headers) => {
      if (response) {
        const res: Video = JSON.parse(response);
        const video = {
          id: res.id,
          url: res.id,
          dateAdded: res.dateAdded,
          description: res.description,
          fileExtension: res.fileExtension,
          thumbs: ''
        };
        this.videos.push(video);
      }
    };
  }

请告诉我如何解决这个问题，如果我选择大于 27MB 的文件大小就会出现这个问题。

谢谢

Answer 1

我通过更改 program.cs 解决了这个问题 file.This 不是 ng2-file-upload 的问题 library.In 我的项目是运行在 kestrel 服务器上，所以我将这一行添加到 program.cs 文件中。

 .UseKestrel(options =>
          {
             options.Limits.MaxRequestBodySize = 209715200;
          })

这里是拉取代码的地方

public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
            .ConfigureLogging(builder =>
                     {
                         builder.SetMinimumLevel(LogLevel.Warning);
                         builder.AddFilter("ApiServer", LogLevel.Debug);
                         builder.AddSerilog();
                     })
            .UseContentRoot(Directory.GetCurrentDirectory())
            .UseKestrel(options =>
              {
                 options.Limits.MaxRequestBodySize = 209715200;
              })
            .UseStartup<Startup>();

然后在我的控制器中的 upload() 方法之上添加 [RequestFormLimits] 和 [RequestSizeLimit] 属性后 class

[RequestFormLimits(MultipartBodyLengthLimit = 209715200)]
[RequestSizeLimit(209715200)]
public async Task<IActionResult> Upload(Guid userId,
        [FromForm]VideoForCreationDto videoForCreationDto)
    {}

如果您使用的是 iis 服务器，请将此代码添加到 web.config file.Actually 我从另一个人那里获得此代码 place.So 我不确定 one.I认为这对某些人有帮助，这就是添加此代码的原因。

<system.webServer>
  <security>
    <requestFiltering>
      <requestLimits maxAllowedContentLength="209715200" />
    </requestFiltering>
  </security>
</system.webServer>

在 Angular7 ASP .Net Core 2.1 中使用 ng2-file-upload 上传视频失败

Video upload fail using ng2-file-upload in Angular7 ASP .Net Core 2.1

typescript

asp.net-core-2.1

angular7