Как отправить изображение с Android-клиента на сервер Node.js через HttpUrlConnection?

Question

Я пытаюсь отправить изображение на сервер, используя HttpUrlConnection, потому что это рекомендуется Google. Я решил преобразовать изображение в строку Base64 и отправить его на сервер, где я декодировал его в файл.jpg. Но этот метод возможен только с миниатюрами небольшого размера, и я не могу отправить полноразмерные изображения.

Вот код клиента Android:

 public static void postData(Bitmap imageToSend) {



        try

        {
            URL url = new URL("http://");
            HttpURLConnection conn = (HttpURLConnection) url.openConnection();
            conn.setRequestMethod("POST");

            conn.setDoInput(true);
            conn.setDoOutput(true);

            conn.setRequestProperty("Connection", "Keep-Alive");
            conn.setRequestProperty("Cache-Control", "no-cache");

            conn.setReadTimeout(35000);
            conn.setConnectTimeout(35000);


            ByteArrayOutputStream bos = new ByteArrayOutputStream();

            // writes a compress version of Bitmap to a specified outputstream
            imageToSend.compress(Bitmap.CompressFormat.JPEG, 100, bos);

            byte[] byteArray = bos.toByteArray();
            String imageEncoded = Base64.encodeToString(byteArray, Base64.DEFAULT);

            List<NameValuePair> params = new ArrayList<NameValuePair>();
            params.add(new BasicNameValuePair("image", imageEncoded));


            OutputStream os = conn.getOutputStream();
            BufferedWriter writer = new BufferedWriter(
                    new OutputStreamWriter(os, "UTF-8"));

            // getQuery is function for creating a URL encoded string
            writer.write(getQuery(params));

            System.out.println("Response Code: " + conn.getResponseCode());

            InputStream in = new BufferedInputStream(conn.getInputStream());
            Log.d("sdfs", "sfsd");
            BufferedReader responseStreamReader = new BufferedReader(new InputStreamReader(in));
            String line = "";
            StringBuilder stringBuilder = new StringBuilder();
            while ((line = responseStreamReader.readLine()) != null)
                stringBuilder.append(line).append("\n");
            responseStreamReader.close();

            String response = stringBuilder.toString();
            System.out.println(response);

            bos.flush();
            bos.close();
            in.close();
            conn.disconnect();

        }

        catch(MalformedURLException e) {
            e.printStackTrace();
        }

        catch(IOException e) {
            e.printStackTrace();
        }


}

Код сервера Node.js:

function base64_decode(base64str,file) {
   var bitmap = new Buffer(base64str,'base64');
   //writing into an image file
   fs.writeFile(file, bitmap);
   //write a text file
    console.log('File created from base64 encoded string');
}

app.post("/", function (req,res,next) {
        //requesting the value of the image key which is urlencoded base 64 string
        var image = req.body.image;
        console.log(req.body.image);
        base64_decode(image,'newImage.jpg');

        res.writeHead(200, {'Content-Type':'text/plain'});
        res.write('the image is saved');
        res.end();
        if (req.url != "/")
           next();
 

Я не могу использовать тот же метод для полноразмерных изображений из-за ограничений размера BufferedWriter - слишком длинная строка в кодировке base64.

Другой метод использует HttpPost и MultipartEntity, но оба они устарели в API22, и я не знал, как обрабатывать запросы на стороне сервера. В других примерах использовались некоторые обертки, такие как два дефиса, границы, crlf, но я не мог найти почему.

Мне нужен пример с HttpUrlConnection

Любая помощь приветствуется, потому что я новичок в Android и node.js

Answer 1

Я бы порекомендовал загружать двоичные данные. Вы можете разместить метаданные изображения (например, имя, тип, идентификатор пользователя, ...) в качестве параметров URL или пользовательских заголовков http (X-...).

Код клиента Android (не тестировался!):

 public static void postData(Bitmap imageToSend) {
        try
        {
            URL url = new URL("http://myserver/myapp/upload-image");
            HttpURLConnection conn = (HttpURLConnection) url.openConnection();
            conn.setRequestMethod("POST");

            conn.setDoInput(true);
            conn.setDoOutput(true);

            conn.setRequestProperty("Connection", "Keep-Alive");
            conn.setRequestProperty("Cache-Control", "no-cache");

            conn.setReadTimeout(35000);
            conn.setConnectTimeout(35000);

            // directly let .compress write binary image data
            // to the output-stream
            OutputStream os = conn.getOutputStream();
            imageToSend.compress(Bitmap.CompressFormat.JPEG, 100, os);
            os.flush();
            os.close();

            System.out.println("Response Code: " + conn.getResponseCode());

            InputStream in = new BufferedInputStream(conn.getInputStream());
            Log.d("sdfs", "sfsd");
            BufferedReader responseStreamReader = new BufferedReader(new InputStreamReader(in));
            String line = "";
            StringBuilder stringBuilder = new StringBuilder();
            while ((line = responseStreamReader.readLine()) != null)
                stringBuilder.append(line).append("\n");
            responseStreamReader.close();

            String response = stringBuilder.toString();
            System.out.println(response);

            conn.disconnect();
        }
        catch(MalformedURLException e) {
            e.printStackTrace();
        }
        catch(IOException e) {
            e.printStackTrace();
        }
}

Node.js, экспресс-код:

function rawBody(req, res, next) {
    var chunks = [];

    req.on('data', function(chunk) {
        chunks.push(chunk);
    });

    req.on('end', function() {
        var buffer = Buffer.concat(chunks);

        req.bodyLength = buffer.length;
        req.rawBody = buffer;
        next();
    });

    req.on('error', function (err) {
        console.log(err);
        res.status(500);
    });
}

app.post('/upload-image', rawBody, function (req, res) {

    if (req.rawBody && req.bodyLength > 0) {

        // TODO save image (req.rawBody) somewhere

        // send some content as JSON
        res.send(200, {status: 'OK'});
    } else {
        res.send(500);
    }

});

Я попытаюсь объяснить часть node.js: функция rawBody выступает в качестве промежуточного программного обеспечения Express. Когда POST запрос сделан, эта функция вызывается с объектом запроса. Регистрирует слушателей для data, end а также error События. data события добавляют все входящие фрагменты данных в буфер. когда end пожары, собственность rawBody создается в объекте запроса и содержит двоичные данные (ваш блоб изображения). rawBody() затем передает управление следующему обработчику, который теперь может сохранить большой двоичный объект в вашей базе данных или файловой системе.

При работе с действительно большими блоками данных этот вид обработки не самый лучший способ. Было бы лучше для потоковой передачи данных в файл или в базу данных для экономии памяти.

Answer 2

У меня пока недостаточно очков, поэтому я должен написать целый ответ вместо комментария.

Я хочу добавить несколько вещей к ответу hgoebl, и это здорово и сэкономило мне много времени! Спасибо!

Перед тем, как очистить поток, вы должны добавить эти строки, так как без них мне не удалось заставить его работать.

urlConnection.setRequestProperty("Content-Type", "multipart/form-data");
urlConnection.setFixedLengthStreamingMode(1024);

Если вы хотите читать напрямую с вашего USB/SD Storage, вам не нужно декодировать ваше растровое изображение и кодировать его в сжатый формат. просто нравится

// ... set request header 

FileInputStream fis = new FileInputStream(filePath);

OutputStream os = new BufferedOutputStream(urlConnection.getOutputStream());
OutputStreamWriter out = new OutputStreamWriter(os);

byte[] buffer = new byte[1024];
int read;
while ((read = fis.read(buffer)) != -1) {
    os.write(buffer, 0, read);
}

... // flush and close

при этом вы сможете загружать любые двоичные данные.