上传者在一个请求中包含多个文件,因此在使用 clearQueue() 获得响应后自定义文件上传不起作用,仅删除单个文件
core.js:3926 错误类型错误:无法读取 FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader.cancelItem 处未定义的属性“中止”(file-uploader .class.js:112) 在 FileItem.push../node_modules/ng2-file-upload/file-upload/file-item.class.js.FileItem.cancel (file-item.class.js:38) 在 FileUploaderCustom .push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader.removeFromQueue (file-uploader.class.js:85) 在 FileItem.push../node_modules/ng2- File-upload/file-upload/file-item.class.js.FileItem.remove (file-item.class.js:41) 在 FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file -uploader.class.js.FileUploader.clearQueue (file-uploader.class.js:92) 在 FileUploaderCustom.uploaderOnward。onSuccessItem (mandate-initial.component.ts:267) 在 FileUploaderCustom.push../node_modules/ng2-file-upload/file-upload/file-uploader.class.js.FileUploader._onSuccessItem (file-uploader.class.js :396) 在 XMLHttpRequest.xhr.onload [as __zone_symbol__ON_PROPERTYload] (fileUploader.ts:71) 在 XMLHttpRequest.wrapFn (zone.js:1255) 在 ZoneDelegate.invokeTask (zone.js:431)
自定义文件上传 .ts
export class FileUploaderCustom extends FileUploader {
constructor(
options: FileUploaderOptions
) {
super(options);
}
uploadAllFiles(): void {
// const _this = this;
const xhr = new XMLHttpRequest();
const sendable = new FormData();
const fakeItem: FileItem = null;
this.onBuildItemForm(fakeItem, sendable);
for (const item of this.queue) {
item.headers = [];
item.withCredentials = true;
item.formData = [];
item.isReady = true;
item.isUploading = true;
item.isUploaded = false;
item.isSuccess = false;
item.isCancel = false;
item.isError = false;
item.progress = 0;
item.index = void 0;
if (typeof item._file.size !== 'number') {
throw new TypeError('The file specified is no longer valid');
}
sendable.append('file', item._file, item.file.name);
}
if (this.options.additionalParameter !== undefined) {
Object.keys(this.options.additionalParameter).forEach((key) => {
sendable.append(key, this.options.additionalParameter[key]);
})
}
xhr.onerror = () => {
this.onErrorItem(fakeItem, null, xhr.status, null);
}
xhr.onabort = () => {
this.onErrorItem(fakeItem, null, xhr.status, null);
}
xhr.open('POST', this.options.url, true);
xhr.withCredentials = true;
if (this.options.headers) {
for (let _i = 0, _a = this.options.headers; _i < _a.length; _i++) {
const header = _a[_i];
xhr.setRequestHeader(header.name, header.value);
}
}
if (this.authToken) {
xhr.setRequestHeader(this.authTokenHeader, this.authToken);
}
xhr.onload = () => {
const headers = this._parseHeaders(xhr.getAllResponseHeaders());
const response = this._transformResponse(xhr.response, headers);
const gist = this._isSuccessCode(xhr.status) ? 'Success' : 'Error';
const method = '_on' + gist + 'Item';
for (const item of this.queue) {
this[method](item, response, xhr.status, headers);
}
this._onCompleteItem(this.queue[0], response, xhr.status, headers);
}
xhr.send(sendable);
}
}
回应
this.uploaderUpdate.onSuccessItem = (item, response, status, headers) => {
this.uploadResult = JSON.parse(response);
console.log(this.uploadResult)
if (this.uploadResult.rescode == "0000") {
this.uploaderUpdate.clearQueue();
this.editMyContainer = !this.editMyContainer;
this.toastyService.success(this.uploadResult.Description);
} else if (this.uploadResult.rescode == "0001") {
this.toastyService.error(this.uploadResult.ErrorDescription);
} else if (this.uploadResult.rescode == "0002") {
this.toastyService.error(this.uploadResult.ErrorDescription);
}
};