ng2-file-upload：文件 maxFileSize 在 Angular 2 中使用 typescript 限制为 < 1MB

Posted 2023-02-26

【中文标题】ng2-file-upload：文件 maxFileSize 在 Angular 2 中使用 typescript 限制为 < 1MB

【英文标题】：ng2-file-upload: file maxFileSize limited to size < 1MB in Angular 2 using typescript

【发布时间】：2018-07-29 10:40:07

【问题描述】：

这是我的代码。我无法上传任何大小超过 1 mb 的文件，但我已将 maxFileSize 设置为 50mb，请帮忙，我做错了什么？

@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);

          

        ;
    
    //declare a constroctur, so we can pass in some properties to the class, which can be    //accessed using the this variable
    constructor(private http: Http, private el: ElementRef,private router:Router,private _location: Location) 

    
    @ViewChild('selectedFile') selectedFile: any;
    clear()
      this.model.programmeCode="";
      this.model.organisation="";
      this.model.consultationDate=null;
      this.selectedFile.nativeElement.value = '';
       (<HTMLInputElement>document.getElementById("file-name")).value = "";
    
     updateFile()
       (<HTMLInputElement>document.getElementById("file-name")).value = "";
       for(var i = 0;i<this.uploader.queue.length;i++)
        if(i != 0)
          (<HTMLInputElement>document.getElementById("file-name")).value += " ; "+this.uploader.queue[i].file.name;
         else
          (<HTMLInputElement>document.getElementById("file-name")).value = this.uploader.queue[i].file.name;
        console.log(this.uploader.queue[i].file.name);
      
     

     close() 
        console.log("closing the window...");
        this.router.navigate(['/home']);
    
    removefile()
        (<HTMLInputElement>document.getElementById("file-name")).value = "";
    
      backClicked() 
        this._location.back();
    

这是我的代码。我无法上传任何大小超过 1 mb 的文件，但我已将 maxFileSize 设置为 50mb，请帮忙，我做错了什么？

【参考方案1】：

在您的.component.ts 中试试这个：

ngOnInit() 
let maxFileSize = 5 * 1024 * 1024; // modify this to your desired max file size
this.uploader = new FileUploader( 
  url:this.url, removeAfterUpload: false, 
  autoUpload: false ,
  method:'post',
  maxFileSize:maxFileSize
);

  this.uploader.onWhenAddingFileFailed = (item, filter) => 
    let message = '';
    switch (filter.name) 
      case 'fileSize':
        message = 'Warning ! \nThe uploaded file \"' + item.name + '\" is ' + this.formatBytes(item.size) + ', this exceeds the maximum allowed size of ' + this.formatBytes(maxFileSize);
        break;
      default:
        message = 'Error trying to upload file '+item.name;
        break;
    

    alert(message);
  ;


formatBytes(bytes, decimals?) 
  if (bytes == 0) return '0 Bytes';
  const k = 1024,
    dm = decimals || 2,
    sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];

【参考方案2】：

普通的 tomcat 服务器应用程序不允许上传超过 1 MB 的文件，因此会引发错误。

如果您看到 api 控制台（java/.net），您将能够看到其中的错误。

您可以先设置 api 的最大大小。使用这个link for more references

如果您收到多部分的错误，请使用此link for more information。