Posting File dan Data Terkait ke RESTful WebService lebih disukai sebagai JSON

Ini mungkin akan menjadi pertanyaan bodoh tapi saya mengalami salah satu malam itu. Dalam aplikasi saya sedang mengembangkan RESTful API dan kami ingin klien mengirim data sebagai JSON. Bagian dari aplikasi ini mengharuskan klien untuk mengunggah file (biasanya gambar) serta informasi tentang gambar.

Saya mengalami kesulitan melacak bagaimana ini terjadi dalam satu permintaan. Apakah mungkin untuk Base64 data file menjadi string JSON? Apakah saya perlu melakukan 2 posting ke server? Haruskah saya tidak menggunakan JSON untuk ini?

Sebagai catatan, kami menggunakan Grails di backend dan layanan ini diakses oleh klien seluler asli (iPhone, Android, dll), jika ada yang membuat perbedaan.

Saya mengajukan pertanyaan serupa di sini:

Bagaimana cara mengunggah file dengan metadata menggunakan layanan web REST?

Anda pada dasarnya memiliki tiga pilihan:

1. Base64 menyandikan file, dengan mengorbankan peningkatan ukuran data sekitar 33%, dan menambahkan pemrosesan overhead di server dan klien untuk encoding / decoding.
2. Kirim file terlebih dahulu dalam multipart/form-dataPOST, dan kembalikan ID ke klien. Klien kemudian mengirimkan metadata dengan ID, dan server menghubungkan kembali file dan metadata.
3. Kirim metadata terlebih dahulu, dan kembalikan ID ke klien. Klien kemudian mengirim file dengan ID, dan server menghubungkan kembali file dan metadata.

Anda dapat mengirim file dan data ke dalam satu permintaan menggunakan tipe konten multipart / form-data :

Dalam banyak aplikasi, dimungkinkan bagi pengguna untuk disajikan dengan formulir. Pengguna akan mengisi formulir, termasuk informasi yang diketik, dihasilkan oleh input pengguna, atau termasuk dari file yang telah dipilih pengguna. Ketika formulir diisi, data dari formulir dikirim dari pengguna ke aplikasi penerima.

Definisi MultiPart / Formulir-Data berasal dari salah satu aplikasi ...

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

"multipart / formulir-data" berisi serangkaian bagian. Setiap bagian diharapkan mengandung header konten-disposisi [RFC 2183] di mana tipe disposisi adalah "form-data", dan di mana disposisi berisi parameter (nama) "nama", di mana nilai parameter itu adalah asli nama bidang dalam formulir. Misalnya, bagian mungkin berisi tajuk:

Content-Disposition: form-data; name = "user"

dengan nilai yang sesuai dengan entri bidang "pengguna".

Anda dapat memasukkan informasi file atau informasi bidang dalam setiap bagian di antara batas. Saya telah berhasil mengimplementasikan layanan RESTful yang mengharuskan pengguna untuk mengirimkan data dan formulir, dan multipart / formulir-data bekerja dengan sempurna. Layanan ini dibangun menggunakan Java / Spring, dan klien menggunakan C #, jadi sayangnya saya tidak punya contoh Grails untuk memberi Anda tentang cara mengatur layanan. Anda tidak perlu menggunakan JSON dalam hal ini karena setiap bagian "formulir-data" memberi Anda tempat untuk menentukan nama parameter dan nilainya.

Hal yang baik tentang menggunakan multipart / form-data adalah Anda menggunakan header yang didefinisikan HTTP, jadi Anda tetap berpegang pada filosofi REST untuk menggunakan alat HTTP yang ada untuk membuat layanan Anda.

Saya tahu bahwa utas ini cukup lama, namun, saya kehilangan satu opsi di sini. Jika Anda memiliki metadata (dalam format apa pun) yang ingin Anda kirim bersama dengan data yang akan diunggah, Anda dapat membuat satu multipart/relatedpermintaan.

Jenis media Multipart / Related ditujukan untuk objek gabungan yang terdiri dari beberapa bagian tubuh yang saling terkait.

Anda dapat memeriksa spesifikasi RFC 2387 untuk detail lebih mendalam.

Pada dasarnya setiap bagian dari permintaan semacam itu dapat memiliki konten dengan tipe yang berbeda dan semua bagian saling terkait (misalnya gambar dan metadata). Bagian-bagian diidentifikasi oleh string batas, dan string batas akhir diikuti oleh dua tanda hubung.

Contoh:

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

Saya tahu pertanyaan ini sudah lama, tetapi pada hari-hari terakhir saya telah mencari seluruh web untuk menyelesaikan pertanyaan yang sama. Saya memiliki layanan web REST grails dan Klien iPhone yang mengirim gambar, judul, dan deskripsi.

Saya tidak tahu apakah pendekatan saya adalah yang terbaik, tetapi sangat mudah dan sederhana.

Saya mengambil gambar menggunakan UIImagePickerController dan mengirim ke server NSData menggunakan tag header permintaan untuk mengirim data gambar.

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

Di sisi server, saya menerima foto menggunakan kode:

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

}

Saya tidak tahu apakah saya memiliki masalah di masa depan, tetapi sekarang bekerja dengan baik di lingkungan produksi.

Ini API pendekatan saya (saya menggunakan contoh) - seperti yang Anda lihat, Anda saya tidak menggunakan file_id(pengidentifikasi file yang diunggah ke server) di API:

1. Buat photoobjek di server:

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

2. Unggah file (catatan yang fileberbentuk tunggal karena hanya satu per foto):

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

Dan kemudian misalnya:

3. Baca daftar foto

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

4. Baca beberapa detail foto

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

5. Baca file foto

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

Jadi kesimpulannya adalah, pertama Anda membuat objek (foto) dengan POST, dan kemudian Anda mengirim permintaan kedua dengan file (lagi POST).

Objek FormData: Unggah File Menggunakan Ajax

XMLHttpRequest Level 2 menambahkan dukungan untuk antarmuka FormData baru. Objek FormData menyediakan cara untuk dengan mudah membangun satu set pasangan kunci / nilai yang mewakili bidang formulir dan nilainya, yang kemudian dapat dengan mudah dikirim menggunakan metode 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

Karena satu-satunya contoh yang hilang adalah contoh ANDROID , saya akan menambahkannya. Teknik ini menggunakan AsyncTask khusus yang harus dideklarasikan di dalam kelas Activity Anda.

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);
    }

}

Jadi, ketika Anda ingin mengunggah file, panggil saja:

new UploadFile().execute();

Saya ingin mengirim beberapa string ke server backend. Saya tidak menggunakan json dengan multipart, saya telah menggunakan params permintaan.

@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 akan terlihat seperti

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

Saya melewati dua params (uuid dan tipe) bersama dengan unggahan file. Semoga ini akan membantu yang tidak memiliki data json kompleks untuk dikirim.

Anda dapat mencoba menggunakan perpustakaan https://square.github.io/okhttp/ . Anda dapat mengatur badan permintaan untuk mengalikan dan kemudian menambahkan file dan objek json secara terpisah seperti:

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
}

Harap pastikan bahwa Anda telah mengikuti impor. Tentu impor standar lainnya

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
    }