Android

[Android] 서버에 이미지 업로드하기02

배현진 2022. 5. 20. 23:30

PHP를 이용한 이미지 업로드가 잘 해결되지 않아 새로운 방식으로 도전해봤다.

JSP를 이용하는 방법이다.

 

우선, JSP를 이용하기 위해서 eclipse, tomcat, MySQL

총 3가지를 설치해주었다.

설치 방법은 아래 링크를 참고하였다.

 

1. eclipse

https://blog.naver.com/rain483/220537080105

 

[ eclipse ] 이클립스 다운로드 // 다운로드 바로가기

이클립스 다운로드 하기 http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/mars...

blog.naver.com

2. tomcat

https://blog.naver.com/rain483/220538009623

 

톰캣 설치하기/tomcat설치

안녕하세요 부르곰입니다. 이번 포스팅은 톰캣 설치하기입니다. 톰캣이란 : 아파치 소프트웨어 파운데이션(...

blog.naver.com

3. MySQL

https://blog.naver.com/rain483/220533029503

 

[ MYSQL ] MYSQL 설치 방법 / MY-SQL 설치 / DB

안녕하세요 부르곰입니다. 이번 포스팅은 mysql 설치 방법에 대해 알아보겠습니다. 먼저 my-sql 사이트에 ...

blog.naver.com

 

모든 설치가 끝난 후, tomcat과 eclipse를 연결하고 jsp 파일을 만들어주었다.

 

+ ) tomcat 과 eclipse 연결하고 JSP 파일 생성하기

https://blog.naver.com/rain483/220538016969

 

톰캣 + 이클립스 연동하기 // 톰캣 + JSP 연동하기// 톰캣 이클립스 연동// 톰캣 JSP 연동

안녕하세요 부르곰입니다. 이번 포스팅에서는 톰캣 + 이클립스 연동하기 // 톰캣 + JSP 연동하기// 톰캣...

blog.naver.com

 

이 과정에서 문제가 발생하였는데, 

jsp 파일을 생성하는 과정에서 필요한 Dynamic Web Project와 Server가 내 eclipse안에는 존재하지 않는다는 것이었다.

반드시 필요한 부분이기 때문에 검색해본 결과, 따로 software를 설치해주면 된다는 해결방법을 찾았다.

 

eclipse -> Help -> Install New Software

-> Work with에 내 eclipse 버전 입력하기 ("https://download.eclipse.org/releases/2021-09")

-> Web, XML, Java EE and ~ 클릭하고

-> Eclipse Java EE Developer Tools, Eclipse Java Web Developer Tools, Eclipse Web Developer Tools, Eclipse XSD Editors and Tools 체크하고 쭉 설치해준다. 

-> 자동으로 eclipse를 재시작하고나면 Dynamic Web Project가 생성되어있는것을 볼 수 있다.

 

같은 방식으로 Web, XML, Java EE and ~ 이후에

JST Server Adapters, JST Server Adapters Extensions 설치하면 Server 생성된다.

 

+ ) ecilpse 에 Dynamic Web Project 안보일때

https://longway.tistory.com/39

 

(이클립스) 이클립스 Dynamic Web Project 안보일 때, 생성하기

이클립스에서 JSP웹 용 DB 프로그래밍을 해야하는데 어째 아무리 봐도 Dynamic Web Project가 안보인다. 이럴 때는 1. Help ->Install New Software 2. Work with에 있는 ▼화살표 누르기 3. 스슥 내려가다 We..

longway.tistory.com

 

다시 jsp 파일 설치를 계속 진행한다.

이때, eclipse 버전이 바뀌면서 변경된 사항이 있는데, 원래 존재하던 WebContent 역할을 Webapp 폴더가 해주고있다는 점이다.

헷갈리지말고 그냥 Webapp 폴더안에 jsp 파일 생성해주면 된다.

 

연동이 제대로 되었는지 확인하기 위해서 하단의 server 탭에서 Tomcat ~ 부분을 우클릭 한 후 Add and Remove를 통해서 원하는 파일을 추가해주면 jsp가 연결됐음을 확인할 수 있다.

 

이때, 이 과정에서 또 문제가 발생하였는데

서버 실행 시, Page load failed with error: The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.

라는 오류 문구가 나오면서 제대로 실행되지 않고 바로 다운되는 현상이 있었다.

 

이에 또 열심히 검색해본 결과 맥북에서 자주 발생하는 일인것 같았다.

해결 방법은 간단했다.

+) 맥북 eclipse 오류 해결

https://imagineu.tistory.com/m/40

 

맥북 Page load failed with error: The resource could not be loaded because the App Transport Security policy requires the use

주말마다 나가는 모각코 스터디가 있는데, 스터디원 중 한명이 이클립스를 이용해 jsp파일을 만들어 Hello World를 찍던 중, Page load failed with error: The resource could not be loaded because..

imagineu.tistory.com

 

 


▶ JspImage 프로젝트

더보기
package com.example.jspimage;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.content.Intent;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.os.StrictMode;
import android.provider.MediaStore;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import java.io.DataOutputStream;
import java.io.FileInputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

public class MainActivity extends AppCompatActivity {

    ImageView imageView = null;
    Button button = null;
    private final int REQ_CODE_SELECT_IMAGE = 100;
    private String img_path = new String();
    private String serverURL = "http://localhost/ImageProject/test.jsp";  // 서버주소
    private Bitmap image_bitmap_copy = null;
    private Bitmap image_bitmap = null;
    private String imageName = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        StrictMode.setThreadPolicy(new StrictMode.ThreadPolicy.Builder()
        .permitDiskReads()
        .permitDiskWrites()
        .permitNetwork().build());

        imageView = (ImageView) findViewById(R.id.imageView);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(Intent.ACTION_PICK);
                intent.setType(MediaStore.Images.Media.CONTENT_TYPE);
                intent.setType(String.valueOf(MediaStore.Images.Media.EXTERNAL_CONTENT_URI));
                startActivityForResult(intent, REQ_CODE_SELECT_IMAGE);
            }
        });

        button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                DoFileUpload(serverURL, img_path);
                Toast.makeText(getApplicationContext(), "이미지 전송 성공", Toast.LENGTH_SHORT).show();
                Log.d("send", "success");
            }
        });
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        Toast.makeText(getBaseContext(), "resultCode : " + data, Toast.LENGTH_SHORT).show();

        if (requestCode == REQ_CODE_SELECT_IMAGE) {
            if (resultCode == Activity.RESULT_OK) {
                try {
                    img_path = getImagePathToUri(data.getData());
                    Toast.makeText(getBaseContext(), "img_path : " + img_path, Toast.LENGTH_SHORT).show();
                    image_bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), data.getData());

                    int reWidth = (int) (getWindowManager().getDefaultDisplay().getWidth());
                    int reHeight = (int) (getWindowManager().getDefaultDisplay().getHeight());

                    image_bitmap_copy = Bitmap.createScaledBitmap(image_bitmap, 400, 300, true);
                    ImageView image = (ImageView) findViewById(R.id.imageView);
                    image.setImageBitmap(image_bitmap_copy);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }

        super.onActivityResult(requestCode, resultCode, data);
    }

    public String getImagePathToUri (Uri data) {
        String[] proj = {MediaStore.Images.Media.DATA};
        Cursor cursor = managedQuery(data, proj, null, null, null);
        int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
        cursor.moveToFirst();

        String imgPath = cursor.getString(column_index);
        Log.d("test", imgPath);

        String imgName = imgPath.substring(imgPath.lastIndexOf("/") + 1);
        Toast.makeText(MainActivity.this, "이미지 이른 : " + imgName, Toast.LENGTH_SHORT).show();
        this.imageName = imgName;

//        DoFileUpload("http://119.70.172.26:8080/ImageProject/test.jsp");
        return imgPath;
    }

    public void DoFileUpload(String apiUrl, String absolutePath) {
        HttpFileUpload(apiUrl, "", absolutePath);
    }

    String lineEnd = "\r\n";
    String twoHyphens = "--";
    String boundary = "*****";

    public void HttpFileUpload(String urlString, String params, String fileName) {
        try {
            FileInputStream mFileInputStream = new FileInputStream(fileName);
            URL connectUrl = new URL(urlString);
            Log.d("Test", "mFileinputStream is " + mFileInputStream);

            HttpURLConnection conn = (HttpURLConnection) connectUrl.openConnection();
            conn.setDoInput(true);
            conn.setDoOutput(true);
            conn.setUseCaches(false);
            conn.setRequestMethod("POST");
            conn.setRequestProperty("Connection", "Keep-Alive");
            conn.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + boundary);

            DataOutputStream dos = new DataOutputStream(conn.getOutputStream());
            dos.writeBytes(twoHyphens + boundary + lineEnd);
            dos.writeBytes("Content=Disposition: form-data; name-\"uploadedfile\"; filename=\"" + fileName + "\"" + lineEnd);
            dos.writeBytes(lineEnd);

            int bytesAvailable = mFileInputStream.available();
            int maxBufferSize = 1024;
            int bufferSize = Math.min(bytesAvailable, maxBufferSize);

            byte[] buffer = new byte[bufferSize];
            int bytesRead = mFileInputStream.read(buffer, 0, bufferSize);

            Log.d("Test", "image byte is " + bytesRead);

            while (bytesRead > 0) {
                dos.write(buffer, 0, bufferSize);
                bytesAvailable = mFileInputStream.available();
                bufferSize = Math.min(bytesAvailable, maxBufferSize);
                bytesRead = mFileInputStream.read(buffer, 0, bufferSize);
            }

            dos.writeBytes(lineEnd);
            dos.writeBytes(twoHyphens + boundary + lineEnd);

            Log.e("Test", "File is written");
            mFileInputStream.close();
            dos.flush();

            InputStream is = conn.getInputStream();
            StringBuffer b = new StringBuffer();
            for (int ch = 0; (ch = is.read()) != -1; ) {
                b.append((char) ch);
            }
            is.close();
            Log.e("Test", b.toString());
        } catch (Exception e) {
            Log.d("Test", "exception " + e.getMessage());
        }
    }
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.oreilly.servlet.MultipartRequest" %>
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		String folderTypePath = "/Users/baehyunjin/Desktop/testdir";
		String name = new String();
		String fileName = new String();
		int sizeLimit = 5 * 1024 * 1024;
		try {
			MultipartRequest multi = new MultipartRequest(request, folderTypePath, sizeLimit, new DefaultFileRenamePolicy());
			Enumeration files = multi.getFileNames();
		
			if (files.hasMoreElements()) {
				name = (String) files.nextElement();
				fileName = multi.getFilesystemName(name);
			}
			System.out.println("이미지를 저장하였습니다. : " + fileName);
		} catch (IOException e) {
			out.println("안드로이드로부터 이미지를 받아옵니다.");
		}
	%>
</body>
</html>

-> 실행 결과

이미지 창에 아무것도 뜨지않고 다운되는 문제 발생.

jsp 파일 관련 문제인거 같다. jsp 파일 작성 후 Run on Server 해보면 오류 발생.

 

+ ) JspImage 프로젝트 참고

https://episode1.tistory.com/entry/5-%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%9D%84%EC%9A%B0%EA%B8%B0-%EB%B0%8F-%EC%84%9C%EB%B2%84-%EC%A0%84%EB%8B%AC%ED%95%98%EC%97%AC-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0

 

[5] 안드로이드 이미지 띄우기 및 JSP서버 전달 후 저장하기

<개요> 안드로이드에 이미지를 선택후 해당 이미지의 데이터를 HttpUrlConnection을 활용하여 jsp서버로 전달하고 jsp서버에서 MultipartRequest 클래스를 통해서 안드로이드로 부터 전달받은 이미지를 반

episode1.tistory.com