Pubblicazione di un file e di dati associati su un servizio Web RESTful preferibilmente come JSON

Questa sarà probabilmente una domanda stupida, ma sto vivendo una di quelle notti. In un'applicazione sto sviluppando l'API RESTful e vogliamo che il client invii i dati come JSON. Parte di questa applicazione richiede al client di caricare un file (di solito un'immagine) e informazioni sull'immagine.

Sto facendo fatica a rintracciare come ciò accade in una singola richiesta. È possibile Base64 i dati del file in una stringa JSON? Ho bisogno di eseguire 2 post sul server? Non dovrei usare JSON per questo?

Come nota a margine, stiamo usando Grails sul backend e questi servizi sono accessibili da client mobili nativi (iPhone, Android, ecc.), Se uno di questi fa la differenza.

Ho fatto una domanda simile qui:

Come faccio a caricare un file con metadati utilizzando un servizio Web REST?

Fondamentalmente hai tre scelte:

1. Base64 codifica il file, a spese di aumentare la dimensione dei dati di circa il 33% e aggiunge un overhead di elaborazione sia nel server che nel client per la codifica / decodifica.
2. Invia prima il file in un multipart/form-dataPOST e restituisce un ID al client. Il client invia quindi i metadati con l'ID e il server associa nuovamente il file e i metadati.
3. Invia prima i metadati e restituisce un ID al client. Il client invia quindi il file con l'ID e il server associa nuovamente il file e i metadati.

È possibile inviare il file e i dati in un'unica richiesta utilizzando il tipo di contenuto multipart / form-data :

In molte applicazioni, è possibile che un utente venga presentato con un modulo. L'utente compilerà il modulo, comprese le informazioni digitate, generate dall'input dell'utente o incluse dai file che l'utente ha selezionato. Quando il modulo viene compilato, i dati dal modulo vengono inviati dall'utente all'applicazione ricevente.

La definizione di MultiPart / Form-Data deriva da una di quelle applicazioni ...

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

"multipart / form-data" contiene una serie di parti. Ogni parte dovrebbe contenere un'intestazione di disposizione del contenuto [RFC 2183] in cui il tipo di disposizione è "form-data" e in cui la disposizione contiene un parametro (aggiuntivo) di "nome", dove il valore di quel parametro è l'originale nome del campo nel modulo. Ad esempio, una parte potrebbe contenere un'intestazione:

Disposizione del contenuto: form-data; name = "utente"

con il valore corrispondente alla voce del campo "utente".

È possibile includere informazioni sui file o informazioni sui campi all'interno di ciascuna sezione tra i limiti. Ho implementato con successo un servizio RESTful che ha richiesto all'utente di inviare sia i dati che un modulo e i dati multipart / form hanno funzionato perfettamente. Il servizio è stato creato utilizzando Java / Spring e il client utilizzava C #, quindi sfortunatamente non ho esempi Grails da darti su come impostare il servizio. In questo caso non è necessario utilizzare JSON poiché ogni sezione "dati-modulo" fornisce un posto per specificare il nome del parametro e il suo valore.

La cosa buona dell'utilizzo di multipart / form-data è che stai usando le intestazioni definite HTTP, quindi ti attieni alla filosofia REST di usare gli strumenti HTTP esistenti per creare il tuo servizio.

So che questo thread è piuttosto vecchio, tuttavia, qui mi manca un'opzione. Se si dispone di metadati (in qualsiasi formato) che si desidera inviare insieme ai dati da caricare, è possibile effettuare una singola multipart/relatedrichiesta.

Il tipo di supporto Multipart / Related è destinato a oggetti composti costituiti da diverse parti del corpo correlate.

È possibile controllare le specifiche RFC 2387 per dettagli più approfonditi.

Fondamentalmente ogni parte di tale richiesta può avere contenuti di tipo diverso e tutte le parti sono in qualche modo correlate (ad esempio un'immagine e i suoi metadati). Le parti sono identificate da una stringa di limite e la stringa di limite finale è seguita da due trattini.

Esempio:

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--

So che questa domanda è vecchia, ma negli ultimi giorni avevo cercato su tutto il web per risolvere questa stessa domanda. Ho Grabs servizi web REST e client iPhone che inviano immagini, titolo e descrizione.

Non so se il mio approccio sia il migliore, ma è così facile e semplice.

Scatto una foto utilizzando UIImagePickerController e invio al server NSData utilizzando i tag di intestazione della richiesta per inviare i dati della foto.

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];

Sul lato server, ricevo la foto utilizzando il codice:

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")

}

Non so se avrò problemi in futuro, ma ora funziona bene nell'ambiente di produzione.

Ecco il mio approccio API (io uso esempio) - come puoi vedere, io non uso alcun file_id(identificatore di file caricato sul server) nell'API:

1. Crea photooggetto sul server:

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

2. Carica file (nota che fileè in forma singolare perché è solo uno per foto):

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

E poi per esempio:

3. Leggi l'elenco delle foto

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

4. Leggi alcuni dettagli della foto

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

5. Leggi il file di foto

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

Quindi la conclusione è che prima crei un oggetto (foto) tramite POST, quindi invii una seconda richiesta con il file (di nuovo POST).

Oggetti FormData: carica file usando Ajax

XMLHttpRequest Level 2 aggiunge il supporto per la nuova interfaccia FormData. Gli oggetti FormData forniscono un modo per costruire facilmente un insieme di coppie chiave / valore che rappresentano i campi modulo e i loro valori, che possono quindi essere facilmente inviati utilizzando il metodo send () XMLHttpRequest.

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

Poiché l'unico esempio mancante è l' esempio ANDROID , lo aggiungerò. Questa tecnica utilizza un AsyncTask personalizzato che deve essere dichiarato all'interno della 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);
    }

}

Quindi, quando vuoi caricare il tuo file, chiama:

new UploadFile().execute();

Volevo inviare alcune stringhe al server back-end. Non ho usato json con multipart, ho usato parametri di richiesta.

@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)

Url sarebbe simile

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

Sto passando due parametri (uuid e tipo) insieme al caricamento del file. Spero che questo possa aiutare chi non ha i dati json complessi da inviare.

Potresti provare a usare la libreria https://square.github.io/okhttp/ . È possibile impostare il corpo della richiesta su più parti e quindi aggiungere separatamente gli oggetti file e json in questo modo:

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
}

Assicurati di avere la seguente importazione. Naturalmente altre importazioni 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
    }