File Upload mit Fetch API

busgi · 20. Juli 2020

Hallo.

Ich versuche gerade ein Bild auf einen server zu senden. Jedoch funktioniert das noch nicht so genau

Hier ist mein code:

Code

<script>
const input = document.getElementById('input'); //ID des input-types. Hier wähle ich das Bild, welches ich zum server senden möchte
input.addEventListener('change', () => {
uploadFile(input.files[0]);
});
const uploadFile = (file) => {
const fd = new FormData();
fd.append('input', file);
// send `POST` request
fetch('/upload', { //Verzeichnis wo das bild gespeichert werden soll
method: 'POST',
body: fd
})
.then(res => res.json())
.then(json => console.log(json))
.catch(err => console.error(err));
}
</script>

Alles anzeigen

Bei dem unteren Quellcode kriege ich immer diese Fehlermeldung angezeigt. Laut Google ist es ein Content-Type Fehler, jedoch dachte ich das Fetch es automatisch setzt.

Code

.then(json => console.log(json)) //SyntaxError: Unexpected token < in JSON at position 0 javascript

Hat jemand eine Idee??

Sempervivum · 20. Juli 2020

Dass Du in den then-Fall statt catch herein kommst ist schon mal ein gutes Zeichen, dann dürfte das Hochladen erfolgreich gewesen sein.

Dein Skript erwartet eine Antwort vom Server im JSON-Format, da Du sie hier entspr. dekodierst:

.then(res => res.json())

Vermutlich ist die Antwort etwas anderes, z. B. HTML. Du kannst dir die Antwort ansehen, indem Du statt dessen den Textmodus verwendest:

Code

// send `POST` request
fetch('/upload', { //Verzeichnis wo das bild gespeichert werden soll
method: 'POST',
body: fd
})
.then(res => res.text())
.then(txt => console.log(txt))
.catch(err => console.error(err));
}

busgi · 20. Juli 2020

Sempervivum schrieb:

Dass Du in den then-Fall statt catch herein kommst ist schon mal ein gutes Zeichen, dann dürfte das Hochladen erfolgreich gewesen sein.

Dein Skript erwartet eine Antwort vom Server im JSON-Format, da Du sie hier entspr. dekodierst:

.then(res => res.json())

Vermutlich ist die Antwort etwas anderes, z. B. HTML. Du kannst dir die Antwort ansehen, indem Du statt dessen den Textmodus verwendest:

Code

// send `POST` request

fetch('/upload', { //Verzeichnis wo das bild gespeichert werden soll

method: 'POST',

body: fd

})

.then(res => res.text())

.then(txt => console.log(txt))

.catch(err => console.error(err));

}

Vielen Dank.

Ich werde es mal versuchen.

Ich habe nämlich auch eine serverseitige Lösung mit express. Es funktioniert so auch nicht. Ich weiß nicht wo da mein fehler ist

Ich habe es nach diesem Tutorial versucht: https://attacomsian.com/blog/u…ng-files-using-fetch-api#

busgi · 20. Juli 2020

Sempervivum schrieb:

Dass Du in den then-Fall statt catch herein kommst ist schon mal ein gutes Zeichen, dann dürfte das Hochladen erfolgreich gewesen sein.

Dein Skript erwartet eine Antwort vom Server im JSON-Format, da Du sie hier entspr. dekodierst:

.then(res => res.json())

Vermutlich ist die Antwort etwas anderes, z. B. HTML. Du kannst dir die Antwort ansehen, indem Du statt dessen den Textmodus verwendest:

Wo kann ich denn die txt im inspector einsehen?

Sempervivum · 20. Juli 2020

Sie wird in die Console geschrieben.

busgi · 20. Juli 2020

Sempervivum schrieb:

Sie wird in die Console geschrieben.

pasted-from-clipboard.png

so sieht die fehlermeldung aus

Sempervivum · 20. Juli 2020

Das sieht mir nicht nach Text aus. Hast Du das Javascript genau so geändert wie in #3?

Und hattest Du auch eine Datei ausgewählt?

busgi · 20. Juli 2020

Sempervivum schrieb:

Das sieht mir nicht nach Text aus. Hast Du das Javascript genau so geändert wie in #3?

Und hattest Du auch eine Datei ausgewählt?

Code

<script>
const input = document.getElementById('input');
// add event listener
input.addEventListener('change', () => {
uploadFile(input.files[0]);
});
const uploadFile = (file) => {
// add file to FormData object
const fd = new FormData();
fd.append('input', file);
// send `POST` request
fetch('/upload', {
method: 'POST',
body: fd
})
.then(res => res.json())
.then(txt => console.log(txt))
.catch(err => console.error(err));
}

Alles anzeigen

ja genau. so sieht es momentan aus. sobald ich das bild auswähle, sollte es im /upload gespeichert werden. tut es leider nicht

Sempervivum · 20. Juli 2020

Du hattest da vergessen, etwas zu ändern:

Code

// send `POST` request
fetch('/upload', {
method: 'POST',
body: fd
})
.then(res => res.text()) // <-- hier
.then(txt => console.log(txt))
.catch(err => console.error(err));
}

Allerdings ist das, was man in #6 sieht, ganz offensichtlich die dekodierte Antwort vom Server. D. h. Du kannst es beim JSON belassen, so wie in deinem ersten Posting. Das mit dem Upload werde ich mal untersuchen, ich müsste da noch eine Testdatei haben ...

Sempervivum · 20. Juli 2020

Sieh dir mal dies an:

Code

// add file to FormData object
const fd = new FormData();
fd.append('input', file);

In deinem serverseitigen Skript taucht die hochgeladene Datei als $_POST['input'] auf. Überprüfe das bzw. poste das serverseitige Skript.

busgi · 20. Juli 2020

Sempervivum schrieb:

Sieh dir mal dies an:

Code

// add file to FormData object

const fd = new FormData();

fd.append('input', file);

In deinem serverseitigen Skript taucht die hochgeladene Datei als $_POST['input'] auf. Überprüfe das bzw. poste das serverseitige Skript.

so sieht es aus momentan.

Code

app.post('/upload', async (req, res) => {
try {
if (!req.files) {
res.send({
status: false,
message: 'No file uploaded'
});
} else {
const avatar = req.files.input;
avatar.mv('/upload' + avatar.name);
res.send({
status: true,
message: 'File is uploaded',
data: {
name: avatar.name,
mimetype: avatar.mimetype,
size: avatar.size
}
});
}
} catch (err) {
res.status(500).send(err);
}
});

Alles anzeigen

busgi · 20. Juli 2020

ja es ist nodejs.

ehrlich gesagt, weiß ich nicht inwiefern sich das ganze unterscheidet.

Ich würde gerne im cientseitigen mit fetch die bilder im /upload speichern. das wars auch schon.

nur habe ich im internet schon so viele beiträge gelesen, dass ich nur noch durcheinander bin.

es gibt varianten mit multer, formidable usw.

Sempervivum · 20. Juli 2020

node.js ist serverseitig. Und um die Bilder hochladen und speichern zu können, brauchst Du ein serverseitiges Skript. Wenn Du bei node.js bleiben möchtest, musst Du warten bis sich jemand meldet, der sich damit auskennt. Alternativ ein PHP-Skript verwenden, um die Datei zu speichern, das wären nur wenige Zeilen und ich könnte dir ein Beispiel geben.

busgi · 20. Juli 2020

Sempervivum schrieb:

node.js ist serverseitig. Und um die Bilder hochladen und speichern zu können, brauchst Du ein serverseitiges Skript. Wenn Du bei node.js bleiben möchtest, musst Du warten bis sich jemand meldet, der sich damit auskennt. Alternativ ein PHP-Skript verwenden, um die Datei zu speichern, das wären nur wenige Zeilen und ich könnte dir ein Beispiel geben.

php ist leider nicht erlaubt. wäre sonst auch damit weitergekommen, da so viele beispiele existieren.

leider muss ich das speichern entweder mit node oder als normales html code hinbekommen. node war auch eine gute alternative, nur leider werde ich beim POST immer redirected. da finde ich auch keine lösung....

ich habe jetzt mal die zeile mit

Code

const fd= new FormData();
fd.append(file, file);
fetch('/upload', {
method: 'POST',
body: fd
})

geändert.

Als meldung kam das zurück. bei fetch('/upload...) gibt es ein problem

pasted-from-clipboard.png

bei

jonas3344 · 20. Juli 2020

Das ist ein 404, d.h. er findet /upload nicht.

Hast du Deine node-App gestartet?

Wo läuft den das Frontend? Auch über node? Oder über Apache?

busgi · 20. Juli 2020

jonas3344 schrieb:

Das ist ein 404, d.h. er findet /upload nicht.

Hast du Deine node-App gestartet?

Wo läuft den das Frontend? Auch über node? Oder über Apache?

das Ganze wird über localhost:8080 gestartet. Die Seite wird auch angezeigt.

so sieht meine ordnerstruktur aus. Es läuft alles mit node

pasted-from-clipboard.png

jonas3344 · 20. Juli 2020

Und du startest mit?

Code

node index.js

Wie sieht denn die index.js aus? Du musst ja alle Routes in dieser Datei haben.

busgi · 20. Juli 2020

jonas3344 schrieb:

Und du startest mit?

Code

node index.js

Wie sieht denn die index.js aus? Du musst ja alle Routes in dieser Datei haben.

ja richtig. so startet alles.

Code

const express = require('express');
const app = express();
app.use(express.static('dist'));
app.get('/', (req, res) => {
res.render('index', {
});
});
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});

Alles anzeigen

app.post habe ich mal rausgenommen

busgi · 20. Juli 2020

jonas3344 schrieb:

Und du startest mit?

Code

node index.js

Wie sieht denn die index.js aus? Du musst ja alle Routes in dieser Datei haben.

Code

app.post('/upload', async (req, res) => {
try {
if (!req.files) {
res.send({
status: false,
message: 'No file uploaded'
});
} else {
// Use the name of the input field (i.e. "avatar") to retrieve the uploaded file
const avatar = req.files.input;
// Use the mv() method to place the file in upload directory (i.e. "uploads")
avatar.mv('/upload' + avatar.name);
// send response
res.send({
status: true,
message: 'File is uploaded',
data: {
name: avatar.name,
mimetype: avatar.mimetype,
size: avatar.size
}
});
}
} catch (err) {
res.status(500).send(err);
}

Alles anzeigen

das ist die post funktion in node

jonas3344 · 20. Juli 2020

Ich bin jetzt auch nicht der ultimative node-Spezialist, verwende es ab und zu für einzelne Applikationen.

Was ich jetzt tun würde:

- Die index.js gehört auf die höchste Ebene

- Ich würde mal den Fileupload-Code rausnehmen und versuchen eine post-route einzurichten, welche ich mit einem "normalen" formular nutze um zu sehen ob das funtkioniert.

Irgendwelche Sachen reinzuhausen funktioniert halt selten, probier Dir das logisch aufzubauen und Schritt für Schritt zu gehen. Und halt mal etwas nachlesen wie man node-Applikationen gut debuggt.

Tags