Django угловая загрузка файла - загрузка работает в Почтальоне, но не с угловой 7 - PullRequest
Новая
       50

Django угловая загрузка файла - загрузка работает в Почтальоне, но не с угловой 7

0 голосов
/ 26 ноября 2018

У меня есть Django Backend, который принимает File с другими данными в качестве запроса.Когда я использую File Upload API от Postman для отправки файлов и других данных формы. Запрос почтальона Он работает нормально и печатает 

<QueryDict: {u'csv': [<InMemoryUploadedFile: log_2018_10_09- 
11_57_16_Summary_subject23_hrm.csv (text/csv)>], u'device_name': 
[u'Zephyr']}>

и файл успешно сохраняется.

Но когда я пытаюсь сделать это с помощью Angular, он записывает пустой объект.Ниже мой угловой код. 

// HTML
<input hidden type="file" id="csv" name="csv" accept=".csv" 
(change)="onFileChange($event)" #fileInput>

// On Change Method
onFileChange(evt: any) {
console.log(this.fileNames.toString());
if (evt.target.files && evt.target.files[0]) {
  console.log(evt.target.files[0]);
  this.file = evt.target.files[0];

  this.fileNames.push({ name: this.file.name });
  this.processFile(this.file).then(data => this.newMethod(data));

  this.showUploadButton = false;
  this.showFileName = true;
}
console.log(this.fileNames[0].name);
}

processFile(file) {
return new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => resolve(reader.result);
  reader.onerror = error => reject(error);
});
}

private newMethod(data: any): void | PromiseLike<void> {
// this.uploadData.append('csv', data);
this.form.get('csv').setValue(this.file);
return data;
}

// On Submit Method
onSubmit() {
this.uploadData.append('device_name', this.form.get('device_name').value);
this.uploadData.append('csv', this.form.get('csv').value);

this.backendService.insertCSV(this.uploadData).subscribe(
  response => {
    console.log(response);
  },
  error => {
    console.log('error', error);
  }
);
}

 // Call to Backend
HttpUploadOptions =
new HttpHeaders({
'content-type': 'multipart/form-data',
});
insertCSV(fileData): Observable<any> {
for (const iterator of Array.from(fileData.entries())) {
  console.log(iterator);
}
// Prints Below on Browser console
// (2) ["csv", File(168761)]
// (2) ["device_name", "Zephyr"]

return this.http.post('http://127.0.0.1:8000/upload/', { data: 
fileData, headers: this.HttpUploadOptions});
}

выдает ошибку на консоли в браузере

и печатает на Django 

{u'headers': {u'normalizedNames': {}, u'lazyUpdate': None}, u'data': {}}

Пожалуйста, помогите мне!

1 Ответ

0 голосов
/ 26 ноября 2018

Я подозреваю, что следующие строки не ждут окончания callback на reader.onload.Значение загрузки файла не закончено.Переместите их в функцию reader.onload. 

// On Change Method
onFileChange(evt: any) {

 if (evt.target.files && evt.target.files[0]) {
  const file = evt.target.files[0];
  const reader = new FileReader();

  reader.onload = () => {
   this.form.get('csv').setValue(file);
   reader.readAsText(evt.target.files[0]);
   this.uploadData.append('csv', this.form.get('csv').value);
  };

 }
}
...