การโพสต์ไฟล์และข้อมูลที่เกี่ยวข้องไปยัง RESTful WebService ควรเป็น JSON

นี่อาจจะเป็นคำถามที่โง่ แต่ฉันมีหนึ่งในคืนนั้น ในแอปพลิเคชันฉันกำลังพัฒนา RESTful API และเราต้องการให้ลูกค้าส่งข้อมูลเป็น JSON ส่วนหนึ่งของแอปพลิเคชันนี้ต้องการให้ลูกค้าอัปโหลดไฟล์ (โดยทั่วไปคือรูปภาพ) รวมถึงข้อมูลเกี่ยวกับรูปภาพ

ฉันมีปัญหาในการติดตามว่าเกิดอะไรขึ้นในคำขอเดียว เป็นไปได้หรือไม่ที่ Base64 ข้อมูลไฟล์ลงในสตริง JSON? ฉันจะต้องทำการโพสต์ 2 ครั้งไปยังเซิร์ฟเวอร์หรือไม่ ฉันไม่ควรใช้ JSON สำหรับสิ่งนี้?

ในฐานะที่เป็นบันทึกด้านข้างเรากำลังใช้ Grails บนแบ็กเอนด์และบริการเหล่านี้เข้าถึงได้โดยลูกค้ามือถือดั้งเดิม (iPhone, Android, ฯลฯ ) หากมีสิ่งใดที่สร้างความแตกต่าง

ฉันถามคำถามที่คล้ายกันที่นี่:

ฉันจะอัพโหลดไฟล์ที่มีเมทาดาทาได้อย่างไรโดยใช้บริการเว็บ REST

คุณมีสามตัวเลือกโดยทั่วไป:

1. Base64 เข้ารหัสไฟล์โดยมีค่าใช้จ่ายในการเพิ่มขนาดข้อมูลประมาณ 33% และเพิ่มค่าใช้จ่ายในการประมวลผลทั้งเซิร์ฟเวอร์และไคลเอนต์สำหรับการเข้ารหัส / ถอดรหัส
2. ส่งไฟล์เป็นอันดับแรกในmultipart/form-dataPOST และส่งคืน ID ไปยังลูกค้า จากนั้นไคลเอ็นต์จะส่งข้อมูลเมตาที่มี ID และเซิร์ฟเวอร์จะเชื่อมโยงไฟล์และข้อมูลเมตาอีกครั้ง
3. ส่งข้อมูลเมตาก่อนและส่งคืนรหัสไปยังลูกค้า จากนั้นไคลเอ็นต์จะส่งไฟล์ที่มี ID และเซิร์ฟเวอร์จะเชื่อมโยงไฟล์และข้อมูลเมตาอีกครั้ง

คุณสามารถส่งไฟล์และข้อมูลในคำขอเดียวโดยใช้ ประเภทเนื้อหาแบบหลายส่วน / แบบฟอร์มข้อมูล :

ในหลายแอปพลิเคชันผู้ใช้สามารถนำเสนอแบบฟอร์มได้ ผู้ใช้จะกรอกแบบฟอร์มรวมถึงข้อมูลที่พิมพ์สร้างขึ้นโดยการป้อนข้อมูลของผู้ใช้หรือรวมจากไฟล์ที่ผู้ใช้เลือก เมื่อกรอกแบบฟอร์มข้อมูลจากแบบฟอร์มจะถูกส่งจากผู้ใช้ไปยังแอปพลิเคชันที่รับ

คำจำกัดความของ MultiPart / Form-Data มาจากหนึ่งในแอปพลิเคชันเหล่านั้น ...

จากhttp://www.faqs.org/rfcs/rfc2388.html :

"multipart / form-data" มีชุดของส่วนต่าง ๆ แต่ละส่วนคาดว่าจะมีส่วนหัว content-disposition [RFC 2183] โดยที่ประเภทการจัดการคือ "form-data" และที่ซึ่งการจัดการประกอบด้วยพารามิเตอร์ (เพิ่มเติม) ของ "ชื่อ" โดยที่ค่าของพารามิเตอร์นั้นเป็นต้นฉบับ ชื่อฟิลด์ในแบบฟอร์ม ตัวอย่างเช่นส่วนหนึ่งอาจมีส่วนหัว:

การจัดการเนื้อหา: แบบฟอร์มข้อมูล; name = "ผู้ใช้"

ด้วยค่าที่สอดคล้องกับรายการของฟิลด์ "ผู้ใช้"

คุณสามารถรวมข้อมูลไฟล์หรือข้อมูลฟิลด์ภายในแต่ละส่วนระหว่างขอบเขต ฉันได้ใช้บริการ RESTful เรียบร้อยแล้วซึ่งต้องการให้ผู้ใช้ส่งทั้งข้อมูลและฟอร์มและ multipart / form-data ทำงานได้อย่างสมบูรณ์ บริการนี้สร้างขึ้นโดยใช้ Java / Spring และลูกค้าใช้ C # ดังนั้นน่าเสียดายที่ฉันไม่มีตัวอย่าง Grails ใด ๆ ที่จะให้คุณเกี่ยวกับวิธีการตั้งค่าบริการ คุณไม่จำเป็นต้องใช้ JSON ในกรณีนี้เนื่องจากแต่ละส่วน "form-data" ให้สถานที่เพื่อระบุชื่อของพารามิเตอร์และค่าของมัน

ข้อดีของการใช้ multipart / form-data คือคุณกำลังใช้ส่วนหัวที่กำหนดโดย HTTP ดังนั้นคุณจึงยึดติดกับปรัชญา REST ในการใช้เครื่องมือ HTTP ที่มีอยู่เพื่อสร้างบริการของคุณ

ฉันรู้ว่ากระทู้นี้ค่อนข้างเก่า แต่ฉันหายไปที่นี่ตัวเลือกเดียว หากคุณมีข้อมูลเมตา (ในรูปแบบใด ๆ ) ที่คุณต้องการส่งพร้อมกับข้อมูลที่จะอัปโหลดคุณสามารถmultipart/relatedส่งคำขอเดียว

Multipart / ประเภทสื่อที่เกี่ยวข้องนั้นมีไว้สำหรับวัตถุผสมซึ่งประกอบด้วยส่วนต่าง ๆ ของร่างกายที่เกี่ยวข้องกันหลายส่วน

คุณสามารถตรวจสอบข้อกำหนดRFC 2387สำหรับรายละเอียดเชิงลึกเพิ่มเติม

โดยทั่วไปแต่ละส่วนของคำขอดังกล่าวสามารถมีเนื้อหาที่มีประเภทแตกต่างกันและทุกส่วนมีความสัมพันธ์กัน (เช่นภาพและข้อมูลเมตา) ชิ้นส่วนจะถูกระบุด้วยสตริงขอบเขตและสตริงขอบเขตสุดท้ายตามด้วยเครื่องหมายขีดคั่นสองตัว

ตัวอย่าง:

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

ฉันรู้ว่าคำถามนี้เก่า แต่ในวันสุดท้ายฉันค้นหาทั้งเว็บเพื่อแก้ปัญหาเดียวกันนี้ ฉันมีเว็บเซิร์ฟเวอร์ REST และไคลเอนต์ iPhone ที่ส่งรูปภาพชื่อและคำอธิบาย

ฉันไม่รู้ว่าวิธีการของฉันดีที่สุดหรือไม่ แต่ง่ายและเรียบง่าย

ฉันถ่ายภาพโดยใช้ UIImagePickerController และส่งไปยังเซิร์ฟเวอร์ NSData โดยใช้แท็กส่วนหัวของคำขอเพื่อส่งข้อมูลของรูปภาพ

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

ที่ฝั่งเซิร์ฟเวอร์ฉันได้รับรูปโดยใช้รหัส:

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

}

ฉันไม่รู้ว่าฉันมีปัญหาในอนาคต แต่ตอนนี้ทำงานได้ดีในสภาพแวดล้อมการผลิต

นี่คือ API แนวทางของฉัน (ฉันใช้ตัวอย่าง) - อย่างที่คุณเห็นคุณไม่ใช้file_id(ตัวระบุไฟล์ที่อัปโหลดไปยังเซิร์ฟเวอร์) ใน API:

1. สร้างphotoวัตถุบนเซิร์ฟเวอร์:

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

2. อัปโหลดไฟล์ (โปรดทราบว่าfileอยู่ในรูปแบบเอกพจน์เพราะมันมีเพียงหนึ่งภาพต่อรูปภาพ):

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

ตัวอย่างเช่น:

3. อ่านรายการภาพถ่าย

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

4. อ่านรายละเอียดภาพถ่าย

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

5. อ่านไฟล์รูปภาพ

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

ดังนั้นข้อสรุปคือก่อนอื่นคุณสร้างวัตถุ (ภาพถ่าย) โดย POST จากนั้นคุณส่งคำขอที่สองพร้อมไฟล์ (อีกครั้ง POST)

วัตถุ FormData: อัปโหลดไฟล์โดยใช้ Ajax

XMLHttpRequest ระดับ 2 เพิ่มการสนับสนุนสำหรับอินเทอร์เฟซ FormData ใหม่ วัตถุ FormData ให้วิธีการสร้างชุดของคู่คีย์ / ค่าที่แสดงถึงเขตข้อมูลฟอร์มและค่าอย่างง่ายดายซึ่งสามารถส่งได้อย่างง่ายดายโดยใช้เมธอด 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

เนื่องจากตัวอย่างเดียวที่ขาดหายไปคือตัวอย่าง ANDROIDฉันจะเพิ่ม เทคนิคนี้ใช้ AsyncTask ที่กำหนดเองที่ควรประกาศไว้ในคลาสกิจกรรมของคุณ

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

}

ดังนั้นเมื่อคุณต้องการอัปโหลดไฟล์ของคุณเพียงแค่โทร:

new UploadFile().execute();

ฉันต้องการส่งสตริงไปยังเซิร์ฟเวอร์เบื้องหลัง ฉันไม่ได้ใช้ json กับ multipart ฉันได้ใช้พารามิเตอร์ขอ

@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 จะเป็นอย่างไร

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

ฉันผ่านสอง params (uuid และ type) พร้อมกับอัพโหลดไฟล์ หวังว่าสิ่งนี้จะช่วยให้ผู้ที่ไม่มีข้อมูล json ที่ซับซ้อนในการส่ง

คุณสามารถลองใช้https://square.github.io/okhttp/ไลบรารี่ คุณสามารถตั้งค่าคำขอร่างกายเป็นหลายส่วนแล้วเพิ่มไฟล์และวัตถุ json แยกจากกันดังนี้:

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
}

โปรดตรวจสอบให้แน่ใจว่าคุณมีการนำเข้าต่อไปนี้ Ofcourse นำเข้ามาตรฐานอื่น ๆ

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
    }