在 Angular 2 和 Typescript 中使用“ng2-file-upload”，无法上传以上文件，1MB答案

【问题标题】：Using “ng2-file-upload” with Angular 2 and Typescript, can't upload file above, 1MB在 Angular 2 和 Typescript 中使用“ng2-file-upload”，无法上传以上文件，1MB
【发布时间】：2018-07-30 14:37:20
【问题描述】：

我正在尝试上传大小超过 1Mb 的文件，并抱怨文件过大。我将大小设置为 50 MB，但这似乎没有生效。我究竟做错了什么？请帮忙

 @Component({
        moduleId: module.id,
        //define the element to be selected from the html structure.
        selector: 'NeedAnalysisConsult',
        //location of our template rather than writing inline templates.
        templateUrl: 'need-analysis-consultation.component.html',

    })
    export class NeedAnalysisConsultationComponent implements OnInit {
        model:any={};
        consultationDate: Date;
        organisation: string;
        devCode:String;
        maxFileSize = 50 * 1024 * 1024;


         //declare a property called fileuploader and assign it to an instance of a new fileUploader.
        //pass in the Url to be uploaded to, and pass the itemAlais, which would be the name of the //file input when sending the post request.
        public uploader:FileUploader = new FileUploader({url: URL,isHTML5: true, itemAlias: 'consultation',maxFileSize: this.maxFileSize});
        //This is the default title property created by the angular cli. Its responsible for the app works
        title = 'app works!';

        ngOnInit() {
        //override the onAfterAddingfile property of the uploader so it doesn't authenticate with //credentials.
          this.uploader.onAfterAddingFile = (file)=> { file.withCredentials = false; };
          this.uploader.onBuildItemForm=(item:any,form:any)=>{
                form.append('devCode',this.model.programmeCode);
                form.append('date',this.model.consultationDate);
                form.append('organization',this.model.organisation);

          };
        //overide the onCompleteItem property of the uploader so we are
        //able to deal with the server response.
          this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
                console.log("FileUpload:successfully uploaded:", item, status, response);
                if (status==201){

                  alert("FileUpload: successfully");

                }
                else {
                 alert("FileUpload:"+response);

              }

            };
        }

我正在尝试上传大小超过 1Mb 的文件，并抱怨文件过大。我将大小设置为 50 MB，但这似乎没有生效。我究竟做错了什么？请帮忙

【问题讨论】：

您是否收到错误消息？您是否检查过您的服务器是否允许对大于 1MB 的文件进行 POST/PUT 操作？
更改可能是来自后端的文件大小限制。

标签： angular typescript filesize ng2-file-upload

【解决方案1】：

我已经测试了你的方法，它在我的服务器上上传正常。检查您的服务器是否配置为接受大于 1 MB 的文件。为了能够确认来自服务器的错误响应，您可以实现以下回调，就像您在 onCompleteItem 上所做的那样。

 onSuccessItem(item: FileItem, response: string, status: number, headers:ParsedResponseHeaders): any {
            //this gets triggered only once when first file is uploaded       
     }
    onErrorItem(item: FileItem, response: string, status: number, headers: 
           ParsedResponseHeaders): any {
                let error = JSON.parse(response); //error - server response            
            }

然后您可以订阅它们，如下所示：

this.uploader.onErrorItem = (item, response, status, headers) => this.onErrorItem(item, response, status, headers);
this.uploader.onSuccessItem = (item, response, status, headers) => this.onSuccessItem(item, response, status, headers);

这样，您将能够检查错误是否来自服务器。

【讨论】：

【解决方案2】：

只有两件事会导致这种情况：

客户端 如果 ng2-file-upload maxFileSize 参数小于 1MB

服务器端 如果您在服务器端使用 PHP，请调整 php.ini

中的以下参数

post_max_size = 50M # 暗示单个 post 请求不应该无论文件数量如何，在任何给定时间都超过 50MB 已上传。
upload_max_filesize = 50M # 暗示没有单个文件应该每个请求超过 50MB
max_file_uploads = 10 #表示只能上传10个文件在一个请求中

【讨论】：