[안드로이드][Backoffice] 맛집 메인사진 등록하기

맛집 검색화면에서 아래와 같이 식당의 사진이 안나오는 정보들이 있습니다. 백오피스에서 이부분을 확인하면서 수정 할 수 있도록 기능을 구현해보려고 합니다.

맛집 사진 등록여부 확인

아래 현재 개발해놓은 맛집 관리 화면입니다. 사진이 등록되었는지 안되었는지 알 수 없어 정보를 추가해주려고합니다. 처음에 사진을 불러와볼까 했는데 이미지를 불러오는데 데이터를 많이 사용할 것 같아 사진 등록여부만 확인 할 수 있도록 구현하기로 했습니다.

아주 단순하게 구현하였습니다.

var hasImage = result[i].img_url1.length > 0

 

맛집 이미지 등록 기능 개발

화면에 이미지를 등록하는 코드를 수정했습니다.

<tr>
                        <th colspan="3">이미지1</th>
                    </tr>
                    <tr>
                        <td colspan="1">
                            <input id="img_url1"/>
                        </td>
                        <form id="fileUploadForm" action="Javascript:image1Upload()">
                            <td colspan="1">
                                <input type="file" id="file" name="file"/>
                            </td>

                            <td colspan="1">
                                <input type="submit" value="이미지 업로드">
                            </td>
                        </form>
                    </tr>

이미지 1부분에 이미지 등록 버튼이 추가된 것을 볼 수 있습니다.

 

이미지 업로드 버튼 클릭 시 API 요청 구현부 입니다.

function image1Upload() {
    if ($.urlParam("restaurant_id")[1].length === 0) {
        alert("식당이 선택되지 않았습니다.");
        return;
    }

    if (document.getElementById("file").value.length === 0) {
        alert("파일을 선택해주세요.");
        return
    }


    var form = $('#fileUploadForm')[0];
    var formData = new FormData(form);
    formData.append('torang_id', $.urlParam("restaurant_id")[1]);

    $.ajax({
        enctype: "multipart/form-data",
        type: "POST",
        data: formData,
        //data: JSON.stringify(menuJson),
        // dataType: "json",
        async: true,
        cache: false,
        url: api + "restaurantPicture",
        crossDomain: true,
        processData: false,  // tell jQuery not to process the data
        contentType: false,  // tell jQuery not to set contentType
        success: function (data) {

            alert("이미지 업로드 성공"+JSON.stringify(data))
        },
        error: function (request, status, error) {
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error)
        }
    });

}

 

백오피스를 통해 맛집 메인이미지를 등록 할 수 있게되었습니다 :)