У меня есть реактивная форма в angular 6, которую я пытаюсь использовать для отправки изображения и некоторых текстовых полей.
Вот оно
<form [formGroup]="imageUpload" (ngSubmit)="imageUploadSubmitted()" method="post" enctype="multipart/form-data" >
<div id="imageDrop" (click)='imageInput.click()' (drop)="drop($event)" (dragover)="allowDrop($event)" #imageDrop></div>
<input type="file" formControlName="imageInput" required #imageInput id="imageInput" name = 'image' (change)='imageChange($event)' accept=".png, .jpg, .jpeg, .gif" > <!-- hide with css -->
<input type="text" formControlName="imageName" placeholder="name" required >
<button type="submit" >Submit</button>
</form>
Так что, либо вы щелкаете мышью по области перетаскивания, которую открывает средство выбора файлов, либо вы отбрасываете изображение.
В любом случае, получите изображение и сохраните его в переменной.
selectedFile:File=null;
drop(e) {
e.preventDefault();
this.imageUpload.controls.imageInput.reset();
this.selectedFile = e.dataTransfer.files[0];
this.checkfiles(e.dataTransfer.files);
}
imageChange(e){
this.selectedFile = e.target.files[0];
this.checkfiles(e.target.files);
}
проверьте выбранные файлы
acceptedImageTypes = {'image/png': true,'image/jpeg': true,'image/gif': true};
checkfiles(files){
if (this.acceptedImageTypes[files[0].type] !== true){
this.imageDrop.nativeElement.innerHTML="Not an image";
return;
}
else if (files.length>1){
this.imageDrop.nativeElement.innerHTML="Only one image/time";
return;
}
else { this.readfiles(files); }
}
круто, теперь подготовьте предварительный просмотр изображения и добавьте его в область перетаскивания
readfiles(files){
const reader = new FileReader();
let image = new Image();
reader.onload = (event) =>{
this.imageDrop.nativeElement.innerHTML="";
let fileReader = event.target as FileReader;
image.src = fileReader.result;
image.width = 150;
this.imageDrop.nativeElement.appendChild(image);
};
reader.readAsDataURL(files[0]);
}
ОК, теперь, когдаФорма отправлена, установите selectedFile в качестве входного значения файла и отправьте форму.
Сначала я пытаюсь установить значение imageInput, изменив его value.Затем я также пытаюсь добавить новый элемент управления формы со значением selectedFile.
В обоих журналах консоли показан правильный объект изображения, но когда они попадают в nodejs v8.11.1, они выглядят пустыми.
Я также попытался создать форму HTML5 по умолчаниюобъект данных (с именем fd) и отправьте его на тот же сервис. Это также выглядит пустым
imageUploadSubmitted(){
let input = this.imageUpload.controls.imageInput as any;
input.value = this.selectedFile;
this.imageUpload.addControl('newImage', new FormControl(this.selectedFile));
console.log('imageInput value = ',this.imageUpload.controls.imageInput.value);
console.log('newImage value = ',this.imageUpload.controls.newImage.value);
//const fd = new FormData();
//fd.append('image', this.selectedFile, this.selectedFile.name);
this.mapcmsService.uploadImage(this.imageUpload.value).subscribe((data) =>{
if(data.success){
alert('ok');
}
else{
alert('nope');
}
})
}
Это мой сервис
uploadImage(data){
let headers = new Headers();
headers.append('Content-Type','application/json');
headers.append('Authorization',this.cma_token);
return this.http.post('http://localhost:3000/cms/map/upload/image', data, {headers:headers}).pipe(map(res => res.json()));
}
И это мой код узла, где я хотел бы использовать грозный, но я неесть значения для работы, поэтому я получаю сообщение об ошибке, что path не определено, так как нет значения
router.post('/upload/image',validate.required(),(req, res)=>{
console.log('FILES - ',req.body);//<< all files appear empty
let oldpath;
let newpath;
let textDate = String(Date.now());
let newname ;
let type;
const form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
oldpath = files.imageInput.path;//ofcourse gives an error and crash node
newpath = path.join(__dirname, '/angular-src/src/app/assets/images/',newname) ;
newname = textDate+files.imageInput.name;
type = files.imageInput.type;
});
});
Этот маршрут имеет промежуточное ПО validate, которое проверяет токен пользователя.Пользовательский токен установлен в заголовках, в сервисе.
Итак, во внешнем интерфейсе значения файла выглядят нормально, но я не получаю значений на сервере.Мой интерфейс выглядит хорошо для меня, и код сервера основан на потрясающем примере.
Так что не так?Сервис?Некоторые параметры узла?Проблемы с безопасностью?Пожалуйста, помогите мне отладить это.Я не могу найти ошибку, поэтому я привел много деталей.
Спасибо