Я работаю над PWA на основе Ioni c, который будет снимать изображение с камеры и загружать его на сервер.
Я использовал следующий код для реализации функции захвата изображения
<input type="file" (change)="onSelectFile($event)" id="fileInput" accept="image/*;capture=camera" hidden />
onSelectFile(event) {
if (event.target.files[0]) {
const type = event.target.files[0].type;
if (type === 'image/jpeg' || type === 'image/jpg' || type === 'image/png') {
this.imagesForRequest.push(event.target.files[0]);
var reader = new FileReader();
reader.onload = (e) => {
this.imagesForDisplay.push(e.target.result);
}
reader.readAsDataURL(event.target.files[0]);
} else {
this.global.displayToastMessage('Please upload an image, Supported formats are JPEG, JPG and PNG');
}
}
}
Этот элемент ввода показывает мне четыре параметра в моем устройстве android после того, как функция щелчка срабатывает на входе
- Камера.
- Camrecorder.
- Recorder.
- Файлы.
Когда я нажимаю на «Файлы», выбираю изображение и загружаю его с помощью вызова POST, оно работает абсолютно нормально.
но когда я выбираю камеру, возьмите изображение и загрузите его, используя тот же вызов POST, он возвращает мне 504 Ошибка шлюза от работника службы.
Это мой вызов API службы, который я использую
submitRequest(request, attachments) {
const formData = new FormData();
if(attachments.length > 0) {
for (let key in attachments) {
formData.append('files', attachments[key]);
}
}
const encodedUrl = '?requestData=' + encodeURIComponent(JSON.stringify(request)) +'&action';
return this.http.post('/requests' + encodedUrl, formData);
}
Почему это Вызов POST работает, когда я выбираю изображение из диспетчера файлов и не работает в случае захвата изображения с камеры.
Это мой файл сервис-воркера
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}