จะขอข้อโต้แย้งหลายประการจาก FormData ได้อย่างไร

นี่เป็นคำถามติดตามผลจาก ที่นี่: ที่นั่น ฉันได้เรียนรู้วิธีอัปโหลดไฟล์ ประมวลผลไฟล์ จากนั้นเติมเนื้อหาในเว็บไซต์อีกครั้งโดยใช้ AJAX และ FormData ตัวอย่างเช่น หากฉันมีไฟล์ data.csv เช่นนี้:

A,B,C
1,3,4
2,4,2

ฉันสามารถผ่านมันได้โดยใช้ AJAX และ FormData

<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
    <div class="custom-file">
       <input id="myfile" name="myfile" type="file" class="custom-file-input">

       <label for="myfile" class="custom-file-label">
         Choose file...
       </label>
    </div>
</form>

// the javascript part
var form = $('#fileUploadForm')[0];
var formdata = new FormData(form);

$.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "/_get_table",
        data: formdata,
        processData: false,
                contentType: false,
                cache: false,
                timeout: 600000,

และรับ:

ป้อนคำอธิบายรูปภาพที่นี่

ฉันสามารถดึงข้อมูลนี้ได้อย่างง่ายดายโดยใช้

file = request.files['myfile']

และแปลงเป็น dataframe โดยใช้

df = pd.read_csv(file)

คำถามของฉันตอนนี้ ฉันจะทำอย่างไร หากฉันต้องการส่งพารามิเตอร์เพิ่มเติม (ไม่ใช่แค่ไฟล์) ที่นี่ แนะนำให้ใช้

var formdata = new FormData();
formdata.append("myform", form)
formdata.append("myvalue", 10)

ซึ่งจะช่วยให้

ป้อนคำอธิบายรูปภาพที่นี่

และ headers

ป้อนคำอธิบายรูปภาพที่นี่

ตอนนี้ฉันจะรวบรวมข้อมูลอย่างถูกต้องได้อย่างไร ฉันจะได้รับ myvalue เช่นนี้

val = request.form['myvalue']

แต่ฉันไม่พบวิธีเข้าถึงและอ่าน myfile ถ้าฉันเช่น พยายาม

file = request.files['myform']

ฉันเข้าใจ

werkzeug.Exceptions.HTTPException.wrap..newcls: 400 คำขอไม่ถูกต้อง: KeyError: 'myform'

ฉันยังลองใช้วิธีแก้ไขปัญหาอื่นจากที่นี่แต่ไม่ประสบความสำเร็จ


python request flask ajax form-data
person Cleb    schedule 03.10.2018    source แหล่งที่มา
comment
โปรดแสดงคำขอทั้งหมดของคุณรวมทั้งส่วนหัวด้วย และแม้ว่ามันจะดูไม่ถูกต้องเพราะคุณไม่ควรใส่ form ลงใน formdata ของคุณ แต่ใส่เฉพาะ myfile เท่านั้น เพย์โหลดของคุณควรประกอบด้วย myfile และ myvalue ดังที่คุณเห็นในภาพหน้าจอของคุณ เห็นได้ชัดว่า myform ไม่ใช่ไฟล์ แต่เป็นวัตถุจาวาสคริปต์ นั่นไม่มีความหมาย   -  person Sraw    schedule 03.10.2018
comment
@Sraw: ใช่ แต่ฉันไม่รู้ว่าจะผ่านมันไปอย่างถูกต้องได้อย่างไร ฉันไม่รู้วิธีแตกไฟล์เท่านั้น ฉันลอง form.elements.myfile แล้ว แต่ก็ไม่ได้ช่วยอะไรเช่นกัน ขอเวลาผมแคปหน้าจอสักนิด...   -  person Cleb    schedule 03.10.2018
comment
@สรอว์; ฉันเพิ่มภาพหน้าจอของส่วนหัว นั่นช่วยได้ไหม?   -  person Cleb    schedule 03.10.2018
comment
ใช่มันช่วยได้ ดังนั้นรูปแบบของคุณจึงถูกต้อง ปัญหาเดียวคือวิธีการส่งไฟล์อย่างถูกต้องในจาวาสคริปต์ ในกรณีนี้นี่ไม่ใช่ปัญหาของหลาม ฉันเดาว่าคุณสามารถ var formdata = new FormData(form); formdata.append("myvalue", 10) โดยตรง   -  person Sraw    schedule 03.10.2018
comment
@Sraw: ดูเหมือนว่าจะได้ผล! อย่าลังเลที่จะเพิ่มมันเป็นคำตอบ แล้วจะมาเปิดอีกคำถามให้เข้าใจพฤติกรรมนี้จริงๆ...   -  person Cleb    schedule 03.10.2018
comment
@Sraw: คุณยังสามารถเพิ่มโซลูชันของคุณเป็นคำตอบได้หรือไม่! จากนั้นฉันจะลงคะแนนและยอมรับ   -  person Cleb    schedule 05.10.2018

คำตอบ (1)


arrow_upward
1
arrow_downward

ปัญหาเกิดขึ้นเนื่องจากคุณไม่ได้เพิ่มไฟล์ของคุณลงใน FormData อย่างถูกต้อง

ในขณะที่คุณใช้ multipart/form-data เพย์โหลดของคุณควรเป็นไฟล์เดียวและ form-data บางไฟล์ แต่ในภาพหน้าจอของคุณ อย่างที่คุณเห็น คุณกำลังเพิ่มหนึ่ง object

เพื่อแก้ปัญหานี้ จริงๆ แล้วคุณสามารถเพิ่มค่าของคุณให้กับต้นฉบับ FormData ได้โดยตรง:

var formdata = new FormData(form); 
formdata.append("myvalue", 10);
person Sraw    schedule 05.10.2018