使用 AJAX 和按钮提交的 Flask 上传文件不起作用

Question

我正在尝试使用引导程序实现文件上传（.csv），并使用按钮提交。

我已经尝试了很多不同的方式来实现文件上传，但到目前为止它们都不起作用，我似乎无法指出问题：

<form method="POST" enctype="multipart/form-data" id="excel-upload" name="file">
      <div class="file-upload-wrapper">
               <label for="file">Upload Excel DAT File</label>
                     <input type="file" name="excel-upload-file" class="form-control-file" id="excel-upload-file">
                         <button class="btn btn-outline-success" type="button" id="submit_table" method="POST" style="margin-top: 30px">
                     <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id = "loading_spinner_table"></span>
                                        Submit File
                                </button>
                            </div>
                        </form>

$("#submit_table").on('click', function(e) {
        e.preventDefault();
        $("#loading_spinner_table").show();
        let form_data = new FormData($('#excel-upload-file')[0]);
        console.log(form_data);
        $.ajax({
            url: "/upload_excel",
            type: "POST",
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                console.log(data)
                $("#loading_spinner_table").hide();
                Plotly.plot('table_data',data);
            },
            error: function(result) {
                $("#loading_spinner_table").hide();
                alert("Invalid Submission / No Data");
            }
        });
    });

@app.route('/upload_excel', methods=['POST', 'GET'])
def upload_blob():
    if request.method in ('POST','GET'):
        print(request.files)
        if 'file' not in request.files:
            print('NO FILE')
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        if file.filename == '':
            print('NOTHING SELECTED')
            flash('No file selected for uploading')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
    """ Additional processing"""

Answer 1

我们在 MVC 中遇到了同样的问题，我们将按钮更改为 **input type **submit**** 然后它起作用了。 按钮对表单提交不起作用

Answer 2

需要进行一些更改。

FormData API 需要采用表单，而不是表单元素。将构建该对象的行更改为：let form_data = new FormData($('#excel-upload')[0]);

接下来，您的 ajax 调用需要指定您使用的是多部分表单编码。在调用中添加这个参数：enctype: 'multipart/form-data'

第三，您要在服务器端使用的文件的键将与表单元素的名称匹配。在这种情况下，您要查找request.files['excel_upload_file']

看起来这段代码是从flask file upload tutorial 中提取的，所以我假设您已经设置了flask 来处理上传。