Angular 文件上传自定义

序

做项目需要使用文件上传功能,但是PrimeNG的文件上传又不符合我们的要求,于是我就想办法自己弄了一个文件上传
(重点代码在 三 四)

零

一开始我是有看牛马风情博主的博客点击跳转 但是不知道什么原因,我就是无法成功,然后没办法我就看了一下PrimeNG文件上传的源码.

一

我发现他是使用XMLHttpRequest来上传文件的,然后我照着他的源码(简单的)做了一下

    upload(file: File) {        const xhr = new XMLHttpRequest();        const url = '/upload';        const formData: FormData = new FormData();        formData.append('uploadFile', file, file.name);        xhr.open('POST', url, true);        xhr.send(formData);    }

然后一次就成功了,但是我还需要上传后服务器的回调函数啊= =!

二

XMLHttpRequest.onreadystatechange

可以设置文件上传后的回调 PrimeNG上是这么处理的

  xhr_1.onreadystatechange = function () {                if (xhr_1.readyState == 4) {                    _this.progress = 0;                    if (xhr_1.status >= 200 && xhr_1.status < 300)                        _this.onUpload.emit({ xhr: xhr_1, files: _this.files });                    else                        _this.onError.emit({ xhr: xhr_1, files: _this.files });                    _this.clear();                }            };

我有一部分看不懂,但是大致的意思应该是判断readyState 是否等于4即传输完成 然后根据状态码选择回调

三

那么我们就只要通过XMLHttpRequest.onreadystatechange来设置回调就ok啦 暴力设置(应该有更好的方法)

// service// object:component    upload(file: File,object:any) {        const xhr = new XMLHttpRequest();        xhr.onreadystatechange = ev => {            object.onUpload(ev);        };        const url = '/upload';        const formData: FormData = new FormData();        formData.append('uploadFile', file, file.name);        xhr.open('POST', url, true);        xhr.send(formData);    }

// component// 图片上传  onFileSelect(event) {    const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;    if (files.length > 0) {      this.resourceService.upload(files[0], this);    }  }onUpload(event) {    if (event.target.readyState === 4) {             // console.log(event) 打印信息 看看需要什么从里面取就行了    }  }

因为我是单文件上传 所以我就取了第一个 然后直接把整个component也传过去了
当状态转变的时候我就调用component.onUpload方法
这里我把readyState判断放在了component.onUpload里面
component.onUpload里面主要就是判断状态以及event信息解析

四

上传文件可能需要获取进度 我这里也贴一下

 xhr.upload.onprogress = ev => {      object.onProgress({'progress': Math.round((ev.loaded * 100) / ev.total)});    };

以上