Publication d'un fichier et des données associées sur un WebService RESTful de préférence au format JSON

Ce sera probablement une question stupide, mais je passe une de ces nuits. Dans une application, je développe l'API RESTful et nous voulons que le client envoie des données au format JSON. Une partie de cette application nécessite que le client télécharge un fichier (généralement une image) ainsi que des informations sur l'image.

J'ai du mal à retracer comment cela se produit dans une seule demande. Est-il possible de Base64 les données du fichier dans une chaîne JSON? Vais-je devoir effectuer 2 publications sur le serveur? Ne devrais-je pas utiliser JSON pour cela?

En remarque, nous utilisons Grails sur le backend et ces services sont accessibles par les clients mobiles natifs (iPhone, Android, etc.), si cela fait une différence.

J'ai posé une question similaire ici:

Comment télécharger un fichier avec des métadonnées à l'aide d'un service Web REST?

Vous avez essentiellement trois choix:

1. Base64 encode le fichier, au prix d'une augmentation de la taille des données d'environ 33%, et ajoute une surcharge de traitement sur le serveur et le client pour l'encodage / décodage.
2. Envoyez d'abord le fichier dans un multipart/form-dataPOST et renvoyez un ID au client. Le client envoie ensuite les métadonnées avec l'ID et le serveur réassocie le fichier et les métadonnées.
3. Envoyez d'abord les métadonnées et renvoyez un ID au client. Le client envoie ensuite le fichier avec l'ID et le serveur réassocie le fichier et les métadonnées.

Vous pouvez envoyer le fichier et les données en une seule demande en utilisant le type de contenu multipart / form-data :

Dans de nombreuses applications, il est possible qu'un utilisateur se voit présenter un formulaire. L'utilisateur remplira le formulaire, y compris les informations saisies, générées par la saisie de l'utilisateur ou incluses à partir des fichiers qu'il a sélectionnés. Lorsque le formulaire est rempli, les données du formulaire sont envoyées de l'utilisateur à l'application réceptrice.

La définition de MultiPart / Form-Data est dérivée de l'une de ces applications ...

Sur http://www.faqs.org/rfcs/rfc2388.html :

"multipart / form-data" contient une série de parties. Chaque partie est censée contenir un en-tête de disposition de contenu [RFC 2183] où le type de disposition est "form-data", et où la disposition contient un paramètre (supplémentaire) de "nom", où la valeur de ce paramètre est l'original nom du champ dans le formulaire. Par exemple, une pièce peut contenir un en-tête:

Contenu-Disposition: formulaire-données; nom = "utilisateur"

avec la valeur correspondant à l'entrée du champ "utilisateur".

Vous pouvez inclure des informations de fichier ou des informations de champ dans chaque section entre les limites. J'ai réussi à implémenter un service RESTful qui obligeait l'utilisateur à soumettre à la fois des données et un formulaire, et les données en plusieurs parties / formulaires fonctionnaient parfaitement. Le service a été construit en utilisant Java / Spring, et le client utilisait C #, donc malheureusement je n'ai pas d'exemples Grails à vous donner sur la façon de configurer le service. Vous n'avez pas besoin d'utiliser JSON dans ce cas car chaque section "form-data" vous fournit un endroit pour spécifier le nom du paramètre et sa valeur.

La bonne chose à propos de l'utilisation de multipart / form-data est que vous utilisez des en-têtes définis par HTTP, donc vous vous en tenez à la philosophie REST d'utiliser les outils HTTP existants pour créer votre service.

Je sais que ce fil est assez ancien, cependant, il me manque ici une option. Si vous avez des métadonnées (dans n'importe quel format) que vous souhaitez envoyer avec les données à télécharger, vous pouvez faire une seule multipart/relateddemande.

Le type de support Multipart / Related est destiné aux objets composés composés de plusieurs parties du corps liées entre elles.

Vous pouvez vérifier la spécification RFC 2387 pour plus de détails.

Fondamentalement, chaque partie d'une telle demande peut avoir un contenu de type différent et toutes les parties sont en quelque sorte liées (par exemple une image et ses métadonnées). Les pièces sont identifiées par une chaîne de délimitation et la chaîne de délimitation finale est suivie de deux tirets.

Exemple:

POST /upload HTTP/1.1
Host: www.hostname.com
Content-Type: multipart/related; boundary=xyz
Content-Length: [actual-content-length]

--xyz
Content-Type: application/json; charset=UTF-8

{
    "name": "Sample image",
    "desc": "...",
    ...
}

--xyz
Content-Type: image/jpeg

[image data]
[image data]
[image data]
...
--foo_bar_baz--

Je sais que cette question est ancienne, mais au cours des derniers jours, j'avais cherché sur tout le Web pour résoudre cette même question. J'ai des services Web REST Grails et un client iPhone qui envoient des photos, un titre et une description.

Je ne sais pas si mon approche est la meilleure, mais elle est si facile et simple.

Je prends une photo en utilisant le UIImagePickerController et envoie au serveur le NSData en utilisant les balises d'en-tête de demande pour envoyer les données de la photo.

NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:@"myServerAddress"]];
[request setHTTPMethod:@"POST"];
[request setHTTPBody:UIImageJPEGRepresentation(picture, 0.5)];
[request setValue:@"image/jpeg" forHTTPHeaderField:@"Content-Type"];
[request setValue:@"myPhotoTitle" forHTTPHeaderField:@"Photo-Title"];
[request setValue:@"myPhotoDescription" forHTTPHeaderField:@"Photo-Description"];

NSURLResponse *response;

NSError *error;

[NSURLConnection sendSynchronousRequest:request returningResponse:&response error:&error];

Côté serveur, je reçois la photo en utilisant le code:

InputStream is = request.inputStream

def receivedPhotoFile = (IOUtils.toByteArray(is))

def photo = new Photo()
photo.photoFile = receivedPhotoFile //photoFile is a transient attribute
photo.title = request.getHeader("Photo-Title")
photo.description = request.getHeader("Photo-Description")
photo.imageURL = "temp"    

if (photo.save()) {    

    File saveLocation = grailsAttributes.getApplicationContext().getResource(File.separator + "images").getFile()
    saveLocation.mkdirs()

    File tempFile = File.createTempFile("photo", ".jpg", saveLocation)

    photo.imageURL = saveLocation.getName() + "/" + tempFile.getName()

    tempFile.append(photo.photoFile);

} else {

    println("Error")

}

Je ne sais pas si j'ai des problèmes à l'avenir, mais maintenant, ça fonctionne bien dans l'environnement de production.

Voici mon approche API (j'utilise un exemple) - comme vous pouvez le voir, vous je n'utilise aucun file_id(identifiant de fichier téléchargé sur le serveur) dans l'API:

1. Créer un photoobjet sur le serveur:

   POST: /projects/{project_id}/photos   
   body: { name: "some_schema.jpg", comment: "blah"}
   response: photo_id

2. Téléchargez le fichier (notez qu'il fileest au singulier car il n'est qu'un par photo):

   POST: /projects/{project_id}/photos/{photo_id}/file
   body: file to upload
   response: -

Et puis par exemple:

3. Lire la liste des photos

   GET: /projects/{project_id}/photos
   response: [ photo, photo, photo, ... ] (array of objects)

4. Lire les détails de la photo

   GET: /projects/{project_id}/photos/{photo_id}
   response: { id: 666, name: 'some_schema.jpg', comment:'blah'} (photo object)

5. Lire le fichier photo

   GET: /projects/{project_id}/photos/{photo_id}/file
   response: file content

Donc, la conclusion est que, d'abord, vous créez un objet (photo) par POST, puis vous envoyez une deuxième demande avec le fichier (à nouveau POST).

Objets FormData: télécharger des fichiers à l'aide d'Ajax

XMLHttpRequest Level 2 ajoute la prise en charge de la nouvelle interface FormData. Les objets FormData fournissent un moyen de construire facilement un ensemble de paires clé / valeur représentant des champs de formulaire et leurs valeurs, qui peuvent ensuite être facilement envoyés à l'aide de la méthode XMLHttpRequest send ().

function AjaxFileUpload() {
    var file = document.getElementById("files");
    //var file = fileInput;
    var fd = new FormData();
    fd.append("imageFileData", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", '/ws/fileUpload.do');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             alert('success');
        }
        else if (uploadResult == 'success')
             alert('error');
    };
    xhr.send(fd);
}

https://developer.mozilla.org/en-US/docs/Web/API/FormData

Étant donné que le seul exemple manquant est l' exemple ANDROID , je vais l'ajouter. Cette technique utilise une AsyncTask personnalisée qui doit être déclarée dans votre classe Activity.

private class UploadFile extends AsyncTask<Void, Integer, String> {
    @Override
    protected void onPreExecute() {
        // set a status bar or show a dialog to the user here
        super.onPreExecute();
    }

    @Override
    protected void onProgressUpdate(Integer... progress) {
        // progress[0] is the current status (e.g. 10%)
        // here you can update the user interface with the current status
    }

    @Override
    protected String doInBackground(Void... params) {
        return uploadFile();
    }

    private String uploadFile() {

        String responseString = null;
        HttpClient httpClient = new DefaultHttpClient();
        HttpPost httpPost = new HttpPost("http://example.com/upload-file");

        try {
            AndroidMultiPartEntity ampEntity = new AndroidMultiPartEntity(
                new ProgressListener() {
                    @Override
                        public void transferred(long num) {
                            // this trigger the progressUpdate event
                            publishProgress((int) ((num / (float) totalSize) * 100));
                        }
            });

            File myFile = new File("/my/image/path/example.jpg");

            ampEntity.addPart("fileFieldName", new FileBody(myFile));

            totalSize = ampEntity.getContentLength();
            httpPost.setEntity(ampEntity);

            // Making server call
            HttpResponse httpResponse = httpClient.execute(httpPost);
            HttpEntity httpEntity = httpResponse.getEntity();

            int statusCode = httpResponse.getStatusLine().getStatusCode();
            if (statusCode == 200) {
                responseString = EntityUtils.toString(httpEntity);
            } else {
                responseString = "Error, http status: "
                        + statusCode;
            }

        } catch (Exception e) {
            responseString = e.getMessage();
        }
        return responseString;
    }

    @Override
    protected void onPostExecute(String result) {
        // if you want update the user interface with upload result
        super.onPostExecute(result);
    }

}

Ainsi, lorsque vous souhaitez télécharger votre fichier, appelez simplement:

new UploadFile().execute();

Je voulais envoyer des chaînes au serveur principal. Je n'ai pas utilisé json avec plusieurs parties, j'ai utilisé des paramètres de demande.

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public void uploadFile(HttpServletRequest request,
        HttpServletResponse response, @RequestParam("uuid") String uuid,
        @RequestParam("type") DocType type,
        @RequestParam("file") MultipartFile uploadfile)

L'URL ressemblerait

http://localhost:8080/file/upload?uuid=46f073d0&type=PASSPORT

Je passe deux paramètres (uuid et type) avec le téléchargement de fichiers. J'espère que cela aidera ceux qui n'ont pas les données json complexes à envoyer.

Vous pouvez essayer d'utiliser la bibliothèque https://square.github.io/okhttp/ . Vous pouvez définir le corps de la requête sur plusieurs parties, puis ajouter séparément le fichier et les objets json comme suit:

MultipartBody requestBody = new MultipartBody.Builder()
                .setType(MultipartBody.FORM)
                .addFormDataPart("uploadFile", uploadFile.getName(), okhttp3.RequestBody.create(uploadFile, MediaType.parse("image/png")))
                .addFormDataPart("file metadata", json)
                .build();

        Request request = new Request.Builder()
                .url("https://uploadurl.com/uploadFile")
                .post(requestBody)
                .build();

        try (Response response = client.newCall(request).execute()) {
            if (!response.isSuccessful()) throw new IOException("Unexpected code " + response);

            logger.info(response.body().string());

@RequestMapping(value = "/uploadImageJson", method = RequestMethod.POST)
    public @ResponseBody Object jsongStrImage(@RequestParam(value="image") MultipartFile image, @RequestParam String jsonStr) {
-- use  com.fasterxml.jackson.databind.ObjectMapper convert Json String to Object
}

Veuillez vous assurer que vous disposez de l'importation suivante. Bien sûr, d'autres importations standard

import org.springframework.core.io.FileSystemResource


    void uploadzipFiles(String token) {

        RestBuilder rest = new RestBuilder(connectTimeout:10000, readTimeout:20000)

        def zipFile = new File("testdata.zip")
        def Id = "001G00000"
        MultiValueMap<String, String> form = new LinkedMultiValueMap<String, String>()
        form.add("id", id)
        form.add('file',new FileSystemResource(zipFile))
        def urld ='''http://URL''';
        def resp = rest.post(urld) {
            header('X-Auth-Token', clientSecret)
            contentType "multipart/form-data"
            body(form)
        }
        println "resp::"+resp
        println "resp::"+resp.text
        println "resp::"+resp.headers
        println "resp::"+resp.body
        println "resp::"+resp.status
    }