如何通过HttpUrlConnection从Android客户端发送图像到Node.js服务器？

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 中已被弃用，而且我不知道如何在服务器端处理请求。在其他示例中，一些包装器被使用，例如两条破折号、边界、回车换行符，但我找不到原因。

我需要一个使用 HttpUrlConnection 的示例。

非常感谢任何帮助，因为我是 Android 和 node.js 的新手。

- Azik

---

如果你想避免与 HttpURLConnection 打交道，可以看看 DavidWebb。如果你正在使用 Express，则有一个带有 一些示例代码 的测试 API 服务器，展示了如何进行上传。通常我不建议使用 Base64，在所有情况下都可以上传二进制文件。你对这个库和 Express 感兴趣吗？ - hgoebl

我无论如何也会使用 Express。非常感谢提供的库，如果我无法解决 HttpUrlConnection 问题，我将考虑使用它。然而，我在文档中看到它不支持多部分上传。 - Azik

Answer 1

我建议上传二进制数据。您可以将图像元数据（例如名称、类型、用户ID等）作为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，Express代码：

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，其中包含二进制数据（您的图像blob）。rawBody()然后将控制权转移到下一个处理程序，该处理程序现在可以将blob保存到数据库或文件系统中。

当处理非常大的数据blob时，这种处理方式并不是最好的方法。更好的方法是将数据流式传输到文件或数据库以节省内存。

- hgoebl

---

就是这样！非常感谢你！你为我节省了很多时间和精力！不过，我还没有完全理解 node.js 部分，我会去研究一下，或者如果你能简单解释一下，我将非常感激！ - Azik

Answer 2

我还没有足够的积分，所以我必须写一整篇答案而不是评论。

我想补充一些hgoebl的回答，他的回答很好，让我省了很多时间！谢谢！

在清空流之前，您必须添加这些行，因为如果没有它们，我就无法使其正常工作。

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

如果您想直接从USB / SD存储器中读取，无需对位图进行解码并将其编码为压缩格式。只需按照以下方式操作：

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

使用此方法，您应该能够上传任何类型的二进制数据。

- Daveloper

---

你好！你是如何定义内容类型的边界的？是用"\n"吗？感谢你的回答。 - user11440762