Я использую тип ввода с файлом для загрузки файла Excel, как показано ниже:
<input type = "file" style = "display: inline-block;" (change) = "readFile($event)" placeholder = "Upload file" accept = ".xlsx">
<button type = "button" class = "btn btn-info" (click) = "uploadExcel()" [disabled] = "!enableUpload">Upload</button>
Для чтения содержимого файла:
public readFile(event) {
try {
this.enableUpload = false;
const reader = new FileReader();
reader.onload = (e: any) => {
console.info(e.target.result);
this.fileContent = e.target.result;
let binary = "";
const bytes = new Uint8Array(e.target.result);
const length = bytes.byteLength;
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
const workbook = XLSX.read(binary, { type: 'binary' });
console.info(workbook);
};
reader.readAsArrayBuffer(file);
console.info(reader);
this.enableUpload = true;
} catch (error) {
console.info('Error reading uploaded file. See below msg for details : \n');
console.info(error);
}
}
при нажатии кнопки «Загрузить» ниже код используется для загрузки содержимого файла.
public uploadExcel() {
let formData = new FormData();
formData.append('file', this.fileContent, 'filename');
this._commonService
.commonHttpPostRequest("http://urlforfileupload",
{ file: this.fileContent }, {}
)
.subscribe(response => {
try {
console.info(response);
} catch (error) {
console.info("Error" + error);
}
});
}
Но я не могу загрузить содержимое файла и получаю следующий ответ:
ошибка 400, неверный запрос { "статус": "bad_input", "message": "файл не найден в полезной нагрузке запроса." }
Я могу видеть fileContent до того, как отправлю запрос.





Наконец нашел решение
Шаблон :
<input type = "file" [multiple] = "multiple" #fileInput class = "browse-btn" (change) = "readFile()" accept = ".xlsx">
<button type = "button" class = "btn btn-info btn-lg" (click) = "upload()" >Upload</button>
Компонент :
public upload() {
const inputEl: HTMLInputElement = this.inputEl.nativeElement;
const fileCount: number = inputEl.files.length;
const formData = new FormData();
const headers = new Headers();
headers.set('Accept', 'application/json');
headers.delete('Content-Type'); // mandate for accepting binary content
if (fileCount > 0) {
for (let i = 0; i < fileCount; i++) {
formData.append('file', inputEl.files.item(i));
}
try {
this.loaderForFileUpload = true;
this.http
.post('http://urlForFileUpload', formData, { headers: headers })
.subscribe(response => {
if (response.status === 200) {
this._toastr.success('File uploaded successfully', 'Success!');
}
}, error => {
this._toastr.error('File contents mismatch', error.statusText);
});
} catch (e) {
console.info('Error occured while posting uploaded file. See below message for details : \n');
console.info(e);
}
}
}