Hi ha dues propostes per a pujar (actualitzar-les tamb\u00e9) unes entitats que porten vinculades a la imatge:<\/p>\n\n\n\n
Amb:<\/p>\n\n\n\n
I aqu\u00ed \u00e9s on premia qui ha de fer \u00fas de la API, quina utilitzaci\u00f3 se li dona. El fet de treballar amb entitats sempre \u00e9s com all\u00f2 de que per a un martell tot s\u00f3n claus. Haur\u00edem de separar:<\/p>\n\n\n\n
De les tres preguntes, les dues primeres s\u00f3n de disseny i la tercera d’arquitectura. Per all\u00f2 del que els backends <\/em>poden viure a esquenes de la realitat si ofereixen unes portes definides. S\u00f3n importants perqu\u00e8 poden encorsetar bastant el processament de les dades (no \u00e9s el mateix un form <\/em>qu\u00e8 un body <\/em>serialitzat).<\/p>\n\n\n\n Amb NodeJS tenim multer<\/a> qu\u00e8 a mode intermediari (middleware) ens pot emmagatzemar la imatge en un directori, i posar-nos les dades del form-data<\/em> al body <\/em>com a propietats. En el seg\u00fcent exemple es fa servir la segona opci\u00f3:<\/p>\n\n\n\n routes.js<\/p>\n\n\n\n imatgeController.js<\/p>\n\n\n\n El fet de que podem sobrecarregar amb diverses funcions les rutes tamb\u00e9 ens facilitar\u00e0 altres tipus de processaments (autenticaci\u00f3, per exemple), per\u00f2 aix\u00f2 ja \u00e9s cosa m\u00e9s de NodeJS i ExpressJS.<\/p>\n\n\n\n La soluci\u00f3 ens sobrecarrega bastant el qu\u00e8 \u00e9s la entitat: la carrega de imatge per un costat, qu\u00e8 pot tenir m\u00e9s l\u00f2gica (compressi\u00f3, tractament, despla\u00e7ament a un lloc remot) i pot fer m\u00e9s pesat del que \u00e9s en si el pujar unes dades per a una entitat.<\/p>\n\n\n\n Per a fer un punt com\u00fa entre client i servidor, el codi swagger.json descriur\u00e0 els camps com a formData parant especial atenci\u00f3 en el type:<\/p>\n\n\n\n Per al client, fem l’exemple de un swagger tipificat i l’utilitzem en un client, en aquest cas, NSwag amb dest\u00ed C#. El resultat \u00e9s una funci\u00f3 utilitzable per aquest client:<\/p>\n\n\n\n Quina seria la difer\u00e8ncia de fer-lo per separat? En un altre post…<\/p>\n","protected":false},"excerpt":{"rendered":" Hi ha dues propostes per a pujar (actualitzar-les tamb\u00e9) unes entitats que porten vinculades a la imatge: [POST] \/api\/v1\/imatge amb un cos html serialitzat tipus { desciption: “”, tags: [“”, “”,””] } [POST] \/api\/v1\/image\/{id}\/upload amb un multipart\/form-www image=@adre\u00e7aImatge Amb: [POST] \/api\/v1\/imatge amb un multipart\/form-data description=”” ; tags=[“”,””,””]; image=@adre\u00e7aImatge I aqu\u00ed \u00e9s on premia qui ha … Continua la lectura de Entitats amb fitxers: tot junt o per parts?<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,9,10,6],"tags":[],"class_list":["post-73","post","type-post","status-publish","format-standard","hentry","category-net-programacio","category-api","category-nodejs","category-programacio"],"_links":{"self":[{"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":1,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":74,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/posts\/73\/revisions\/74"}],"wp:attachment":[{"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/media?parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/categories?post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guillemrueda.com\/blog\/wp-json\/wp\/v2\/tags?post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} app.post(\"\/v1\/imatge\", imatgeController.uploadImg, imatgeController.save);<\/code><\/pre>\n\n\n\nconst multer = require('multer');\r\n\rconst fs = require('fs');\r\n\r\nconst imageStorage = multer.diskStorage({\r\n destination: function (req, file, cb) {\r\n\r\n if (!fs.existsSync('.\/imageUploads')) {\r\n fs.mkdirSync('.\/imageUploads');\r\n }\r\n\r\n cb(null, '.\/imageUploads');\r\n },\r\n filename: function (req, file, cb) {\r\n cb(null, file.originalname);\r\n }\r\n});\r\n\r\nexports.uploadImg = multer({ storage: imageStorage }).single('image');\nexports.save = async (req, res) => {\n\nvar entity = { description: req.body.description, image: req.file.filename, tags: req.body.tags };\n...\n}\n\n<\/code><\/pre>\n\n\n\n\"\/v1\/imatges\": {\r\n \"post\": {\r\n \"tags\": [\r\n \"imatges\"\r\n ],\r\n \"summary\": \"Afegir una imatge\",\r\n \"description\": \"Ruta per afegir una nova imatge\",\r\n \"consumes\": [\r\n \"image\"\r\n ],\r\n \"parameters\": [\r\n {\r\n \"name\": \"imatge\",\r\n \"in\": \"formData\",\r\n \"description\": \"afegir nova imatge\",\r\n \"required\": \"true\",\r\n \"type\": \"file\"\r\n },\r\n {\r\n \"name\": \"descripcio\",\r\n \"in\": \"formData\",\r\n \"description\": \"descripci\u00f3 de la imatge\",\r\n \"required\": \"true\",\r\n \"type\": \"string\"\r\n }\r\r\n ], \n...<\/code><\/pre>\n\n\n\n \/\/\/ <summary>Create a banner<\/summary>\n \/\/\/ <param name=\"image\">Adding new publication.<\/param>\n \/\/\/ <param name=\"name\">Banner name<\/param>\n \/\/\/ <param name=\"isDisabled\">Is disabled?<\/param>\n \/\/\/ <param name=\"analyticCode\">Analytic Code<\/param>\n \/\/\/ <exception cref=\"SwaggerException\">A server side error occurred.<\/exception>\n public System.Threading.Tasks.Task Banners4Async(FileParameter image, string name, bool isDisabled, string analyticCode)\n {\n return Banners4Async(image, name, isDisabled, analyticCode, System.Threading.CancellationToken.None);\n }<\/code><\/pre>\n\n\n\n