Загрузка изображения base64 из Angular на сервер
Я пытаюсь загрузить изображение base64 из Angular в ExpressJS. Я использую html2canvas для создания изображения base64. Если я попытаюсь загрузить imageData в его текущей форме, я получу imageData.replace is not a function. Если я попытаюсь упорядочить это так в службе angular
const image = JSON.stringify(imageData);
const data = image.replace(/^data:image/\w+;base64,/, '');
Тогда я получаю Buffer is not a constructor Как я могу успешно загрузить его на сервер ExpressJS? Я ценю любую помощь!
Компонент
ngAfterViewInit() {
sleep(5000).then(() => {
const table = document.getElementById('table');
this.dataUrl = html2canvas(table).then(function (canvas) {
const res = canvas.toDataURL();
return res;
});
this.angularService.uploadImage('png', this.dataUrl);
});
}
Услуга
uploadImage(contentType, imageData) {
console.info("imageData", imageData)
const headers = new HttpHeaders();
if (contentType === 'jpeg') {
headers.set('Content-Type', 'image/jpeg;');
} else if (contentType === 'png') {
headers.set('Content-Type', 'image/jpeg;');
}
const data = imageData.replace(/^data:image/\w+;base64,/, '');
const buff = new Buffer(imageData, 'base64');
return this.http.put(
environment.slsLocal + '/update-image-url',
buff.buffer,
{ headers: headers }
);
}
Console.info('imageData', imageData) в сервисе выглядит так
Я удалил подписку, потому что она не позволяет подписаться внутри цепочки обещаний. Теперь он распознает функцию. Те же ошибки, упомянутые ранее Buffer is not a constructor и imageData.replace is not a function, все еще происходят, поэтому ничего не изменилось. См. обновленное изображение и обновленный console.info в службе
Ответы 1
У вас есть 2 проблемы.
Html2canvas(table).then возвращает обещание. Не res. Вы должны вызвать this.angularService внутрь html2canvas(table).then.
Я не уверен, что вы пытаетесь сделать с const buff = new Buffer(imageData, 'base64');. Если вы хотите загрузить содержимое base64, просто поставьте data.
Также обратите внимание, что вы должны subscribe вернуть this.http.put, потому что HTTP-запрос не будет отправлен на ваш сервер, если он не подписан.
Сложите это вместе.
Компонент
ngAfterViewInit() {
sleep(5000).then(() => {
const table = document.getElementById('table');
html2canvas(table).then(function (canvas) {
const res = canvas.toDataURL();
this.dataUrl = res;
this.angularService.uploadImage('png', this.dataUrl)
.subscribe( result => {
// your logic
} );
});
});
}
Услуга
uploadImage(contentType, imageData) {
console.info("imageData", imageData)
const headers = new HttpHeaders();
if (contentType === 'jpeg') {
headers.set('Content-Type', 'image/jpeg;');
} else if (contentType === 'png') {
headers.set('Content-Type', 'image/jpeg;');
}
const data = imageData.replace(/^data:image/\w+;base64,/, '');
return this.http.put(
environment.slsLocal + '/update-image-url',
data,
{ headers: headers }
);
}
Когда я перемещаю this.angularService.uploadImage внутрь .then(), я получаю ERROR Error: Uncaught (in promise): TypeError: this.angularService.uploadImage is not a function. Он не распознает его внутри then(). Он распознает это, потому что я вижу, что dataUrl передается службе, поэтому я не уверен, что проблема в этом.
Те же ошибки, упомянутые ранее Buffer is not a constructor и imageData.replace is not a function, все еще происходят в тех же сценариях в посте, поэтому ничего не изменилось. См. обновленное изображение и обновленный console.info в службе
В обоих случаях вы устанавливаете для типа контента значение 'image/jpeg', но я не думаю, что это проблема. Вы вызываете функцию uploadImage вне then() функции sleep(). Итак, мне кажется, что uploadImage вызывается до того, как this.dataUrl установлено.