使用 FormData 在 Angular 4 中上传文件在本地有效，但在 Azure 应用服务中无效

Question

我有以下用于上传文件的代码，似乎适用于我的本地文件（任何文件大小），但当我将它指向我的 Azure Web 应用程序服务且文件大于 15MB 时，它不起作用。

我的请求是这样的：

     Accept:application/json, text/plain, */*
    Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryBBKpQY4MP4j1noAY
    Origin:http://xxxxxxxxx.azurewebsites.net
    Referer:http://xxxxxxxxxxx.azurewebsites.net/
    User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

------WebKitFormBoundaryBBKpQY4MP4j1noAY
Content-Disposition: form-data; name="selectFile"; filename="JDGUPLOAD - date error.xlsx"
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet


  <div class="customfile-container">
    <input type="file" id="selectFile" name="selectFile" class="custom-file-input" multiple />
  </div>

public uploadFile() {
    let files = this.elem.nativeElement.querySelector('#selectFile').files;
    if (files.length == 0) {
        this.nofileattached = true;
        this.nofileattached = true;
        //wait 3 Seconds and hide
        setTimeout(function () {
            this.nofileattached = false;
            console.log(this.nofileattached);
        }.bind(this), 5000);
    }
    else {
        this.loading = true;
        debugger;
        let formData = new FormData();
        let file = files[0];
        formData.append('selectFile', file, file.name);
        this.fileUploader.uploadCustomerFile(formData, this.customerid, this.overrideData, this.username).subscribe(res => this.importComplete(res));
    }
}

uploadCustomerFile(formData: FormData, customerid, overrideData, username) {
    let _url: string = this.config.apiUrl + '/api/FileExtract/ExtractFile?param=' + customerid + '-' + overrideData + '-' + username + '';
    return this._http.post(_url, formData).map((res: Response) => res.json());
}

Answer 1

在 Azure App Service 中，您可以通过在 web.config 文件中设置 <requestLimits> 来增加文件上传大小限制：

<system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="2147483648" />
        <!--Byte in size,increase it to 2GB-->
      </requestFiltering>
    </security>
</system.webServer>

对于 ASP.NET，除了添加 maxAllowedContentLength 设置外，您还需要添加：

<system.web>
    <httpRuntime maxRequestLength="2097152" />
    <!--KB in size, 4MB by default, increase it to 2GB-->
</system.web>

如果您使用 PHP，您还需要在 /wwwroot 目录中创建一个名为 .user.ini 的文件，并添加 upload_max_filesize 和 post_max_size 其中：

; Maximum allowed size for uploaded files.
upload_max_filesize = 40M

; Must be greater than or equal to upload_max_filesize
post_max_size = 40M

使用 FormData 在 Angular 4 中上传文件在本地有效，但在 Azure 应用服务中无效

Upload File in Angular 4 using FormData works in Local but not on Azure App Service

form-data

azure

azure-web-app-service

angular