Liquid, JavaScript, Themes
Ich arbeite derzeit an dem Hochladen von Dateien über die stagedUploadsCreate Mutation in node.js.
Ich habe es derzeit geschafft, eine Datei in den Shopify Staged Upload Storage auf Google Cloud hochzuladen, aber die Datei ist leer!
Das ist der Code:
1. Erstellen des Staged Uploads:
const CREATE_STAGED_UPLOADS = ` mutation stagedUploadsCreate($input: [StagedUploadInput!]!) { stagedUploadsCreate(input: $input) { stagedTargets { resourceUrl url parameters { name value } } userErrors { field message } } } `; const response = await client.query({ data: { query: CREATE_STAGED_UPLOADS, variables: { "input": [ { "resource": "FILE", "filename": file.name, "mimeType": fileType.toString(), "fileSize": file.size.toString(), "httpMethod": "POST" } ] }, }, });
Dies führt zu einer erfolgreichen Antwort.
2. Dann sende ich einen Fetch Request an den URL von der stagedUploadsCreate Mutation:
const parameters = response?.body?.data?.stagedUploadsCreate?.stagedTargets[0]?.parameters; const url = response?.body?.data?.stagedUploadsCreate?.stagedTargets[0].url; const formData = new FormData(); parameters.forEach(({name, value}) => { formData.append(name, value) }); formData.append('file', file); const response = await fetch(url, { method: 'POST', body: formData });
Die Antwort gibt ebenfalls 201 "Created" mit dem folgenden Xml-Objekt zurück:
{ PostResponse: { Location: [ 'https://storage.googleapis.com/shopify-staged-uploads/tmp/72115945762/files/63bd5db8-afc9-435b-bc2b-a0d0b5be791f/check-2.png' ], Bucket: [ 'shopify-staged-uploads' ], Key: [ 'tmp/72115945762/files/63bd5db8-afc9-435b-bc2b-a0d0b5be791f/check-2.png' ], ETag: [ '"************************"' ] } }
Aber wenn Sie die resourceUrl aus der createStagedUpload-Mutation und die Location url aus der xml-Antwort aufrufen, wird ein leeres Bild angezeigt:
Ich hoffe, dass ich dieses Problem ausreichend und verständlich erläutert habe.
Vielen Dank im Voraus!
Gelöst! Zur Lösung
Erfolg.
Hey @TheDeveloper
Danke für die Angaben und es ist schwer zu sagen wo hier der Wurm liegt ¯\_(ツ)_/¯.
Ein paar Vorschläge gebe ich unten die ich aus unserer Entwickler Doku entnommen habe, aber bei weiteren Fragen empfehle ich das mit Experten zu besprechen.
Die Datei wurde also erfolgreich hochgeladen, stimmt dessen Größe aber nicht mit der tatsächlichen Größe der Datei überein, da es sich um eine leere Datei handelt. Ein möglicher Grund könnte sein, dass die Datei nicht vollständig gelesen wurde, bevor sie in das FormData-Objekt
eingefügt wurde. Hier könnte man vielleicht die "readAsArrayBuffer
" -Methode der FileReader-API verwenden, um die Datei zu lesen, keine Ahnung, nur so eine Idee ¯\_(ツ)_/¯.
Verwende vielleicht die "fs
" -Library im Code, um auf das Dateisystem zuzugreifen. Lese dann die Datei mit der "fs.readFileSync
" -Methode in ein ArrayBuffer
ein wie folgt:
const fileContent = fs.readFileSync(filePath);
const arrayBuffer = new Uint8Array(fileContent).buffer;
Daraufhin kannst du vielleicht das ArrayBuffer
verwenden, um eine Blob-Datei mit dem richtigen MIME-Typ zu erstellen:
const blobFile = new Blob([arrayBuffer], { type: fileType });
blobFile.name = file.name;
Füge dann die Blob-Datei zum FormData-Objekt
hinzu:
formData.append('file', blobFile);
Führe dann den Fetch Request erneut aus und schaue, ob das hochgeladene Bild jetzt korrekt angezeigt wird.
Diese Angaben sind, wie gesagt, ohne Gewähr und ein Experte bin ich auch nicht. Aber vielleicht bringt das dich auf den richtigen Pfad das Problem zu lösen!
VG,
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Erfolg.
Hey @TheDeveloper
Danke für die Angaben und es ist schwer zu sagen wo hier der Wurm liegt ¯\_(ツ)_/¯.
Ein paar Vorschläge gebe ich unten die ich aus unserer Entwickler Doku entnommen habe, aber bei weiteren Fragen empfehle ich das mit Experten zu besprechen.
Die Datei wurde also erfolgreich hochgeladen, stimmt dessen Größe aber nicht mit der tatsächlichen Größe der Datei überein, da es sich um eine leere Datei handelt. Ein möglicher Grund könnte sein, dass die Datei nicht vollständig gelesen wurde, bevor sie in das FormData-Objekt
eingefügt wurde. Hier könnte man vielleicht die "readAsArrayBuffer
" -Methode der FileReader-API verwenden, um die Datei zu lesen, keine Ahnung, nur so eine Idee ¯\_(ツ)_/¯.
Verwende vielleicht die "fs
" -Library im Code, um auf das Dateisystem zuzugreifen. Lese dann die Datei mit der "fs.readFileSync
" -Methode in ein ArrayBuffer
ein wie folgt:
const fileContent = fs.readFileSync(filePath);
const arrayBuffer = new Uint8Array(fileContent).buffer;
Daraufhin kannst du vielleicht das ArrayBuffer
verwenden, um eine Blob-Datei mit dem richtigen MIME-Typ zu erstellen:
const blobFile = new Blob([arrayBuffer], { type: fileType });
blobFile.name = file.name;
Füge dann die Blob-Datei zum FormData-Objekt
hinzu:
formData.append('file', blobFile);
Führe dann den Fetch Request erneut aus und schaue, ob das hochgeladene Bild jetzt korrekt angezeigt wird.
Diese Angaben sind, wie gesagt, ohne Gewähr und ein Experte bin ich auch nicht. Aber vielleicht bringt das dich auf den richtigen Pfad das Problem zu lösen!
VG,
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Hallo @Gabe
Danke für deine schnelle und hilfreiche Antwort!
Es hat funktioniert, ich danke dir sehr!
Super freut mich! 😉
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024