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

以上