플라스크에서 ajax 호출을 사용하여 파일을 업로드하는 방법

플라스크에서 ajax 호출을 사용하여 파일을 업로드하는 방법

안녕하세요, 저는 플라스크에 익숙하지 않아서 서버에 ajax 호출을 사용하여 파일을 업로드하고 싶습니다.설명서에서 언급한 바와 같이 파일 업로드를 html에 다음과 같이 추가했습니다.

<form action="" method=post enctype="multipart/form-data" id="testid">
 <table>
  <tr>
   <td>
     <label>Upload</label>
   </td>
   <td>
     <input id="upload_content_id" type="file" name="upload_file" multiple>
     <input type="button" name="btn_uplpad" id="btn_upload_id" class="btn-upload" value="Upload"/>

   </td>
  </tr>
 </table>
</form>

아약스 핸들러는 이렇게 썼어요

$(document).ready(function() {
    $("#btn_upload_id" ).click(function() {           
        $.ajax({
            type : "POST",
            url : "/uploadajax",
            cache: false,
            async: false,
            success : function (data) {},
            error: function (XMLHttpRequest, textStatus, errorThrown) {}
        });
    });
});

여기서 업로드된 파일(이름 아님)을 가져오는 방법을 알 수 없습니다.

  <input id="upload_content_id" type="file" name="upload_file" multiple>

파일을 폴더에 저장합니다.제가 쓴 핸들러에서 파일을 읽는 방법을 잘 모르겠습니다.

@app.route('/uploadajax', methods = ['POST'])
def upldfile():
    if request.method == 'POST':
        file_val = request.files['file']

누군가 도와주면 고맙겠다.잘 부탁드립니다.

질문에 답하려면...

HTML:

<form id="upload-file" method="post" enctype="multipart/form-data">
    <fieldset>
        <label for="file">Select a file</label>
        <input name="file" type="file">
    </fieldset>
    <fieldset>
        <button id="upload-file-btn" type="button">Upload</button>
    </fieldset>
</form>

JavaScript:

$(function() {
    $('#upload-file-btn').click(function() {
        var form_data = new FormData($('#upload-file')[0]);
        $.ajax({
            type: 'POST',
            url: '/uploadajax',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                console.log('Success!');
            },
        });
    });
});

이제 플라스크의 엔드포인트 뷰 기능에서 flask.request를 통해 파일 데이터에 액세스할 수 있습니다.파일을 표시합니다.

한편 양식은 표 형식의 데이터가 아니므로 표에 속하지 않습니다.대신 순서가 지정되지 않은 목록 또는 정의 목록을 사용해야 합니다.

JavaScript(클라이언트 측):

var form_data = new FormData();
form_data.append('file', $('#uploadfile').prop('files')[0]);

$.ajax({
    type: 'POST',
    url: '/uploadLabel',
    data: form_data,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
        console.log('Success!');
    },
});

Python(서버 측):

@app.route('/uploadLabel', methods=['GET', 'POST'])
def uploadLabel():
    isthisFile = request.files.get('file')
    print(isthisFile)
    print(isthisFile.filename)
    isthisFile.save('./' + isthisFile.filename)

저장된 파일이 비어 있는 문제가 있었는데, 포인터 때문인 것으로 나타났습니다.이에 대해 언급한 사람을 찾을 수 없었기 때문에, 다음과 같은 제안을 합니다.

FormData 요청 파일은 다음 위치에서 액세스할 수 있습니다.request.files그런 다음 FormData에 포함된 파일을 선택할 수 있습니다. request.files['audio'].

파일의 실제 바이트에 액세스하려면 , 다음의 「오디오」를 사용해 주세요..stream커서가 파일의 끝이 아닌 첫 번째 바이트를 가리키고 있는지 확인해야 합니다.이 경우 빈 바이트가 표시됩니다.

따라서 이를 위한 좋은 방법은 다음과 같습니다.

file = request.files['audio']
file.stream.seek(0)
audio = file.read()

언급URL : https://stackoverflow.com/questions/18334717/how-to-upload-a-file-using-an-ajax-call-in-flask