javascript - 有什么办法可以将Javascript中上传的附件文件发送到Python/Flask吗？

Question

此代码上传文件，但我无法集成我的 Javascript 和 Flask 代码，也就是说，前端正在接收文件，但不会将其发送到后端。

Javascript

//DOM
const $ = document.querySelector.bind(document);

//APP
let App = {};
App.init = (function () {
    //Init
    function handleFileSelect(evt) {
        const files = evt.target.files; // FileList object

        //files template
        let template = `${Object.keys(files)
            .map(file =>   `<div class="file file--${file}">
                                <div class="name"><span>${files[file].name}</span></div>
                                    <div class="progress active"></div>
                                    <div class="done">
                                        <a href="" target="_blank">
                                        
                                        </a>
                                    </div>
                                </div>
                            </div>`)
            .join("")}`;

        $("#drop").classList.add("hidden");
        $("footer").classList.add("hasFiles");
        $(".importar").classList.add("active");
        $(".submit").classList.add("active");
        setTimeout(() => {
            $(".list-files").innerHTML = template;
        }, 1000);

        Object.keys(files).forEach(file => {
            let load = 2000 + (file * 2000); // fake load
            setTimeout(() => {
                $(`.file--${file}`).querySelector(".progress").classList.remove("active");
                $(`.file--${file}`).querySelector(".done").classList.add("anim");
            }, load);
        });
    }

    // trigger input
    $("#triggerFile").addEventListener("click", evt => {
        evt.preventDefault();
        $("input[type=file]").click();
    });

    $("#triggerFile2").addEventListener("click", evt => {
        evt.preventDefault();
        $("input[type=file]").click();
    });

    // drop events
    $("#drop").ondragleave = evt => {
        $("#drop").classList.remove("active");
        evt.preventDefault();
    };
    $(`#drop`).ondragover = $("#drop").ondragenter = evt => {
        $("#drop").classList.add("active");
        evt.preventDefault();
    };
    $("#drop").ondrop = evt => {
        $("input[type=file]").files = evt.dataTransfer.files;
        $("footer").classList.add("hasFiles");
        $("#drop").classList.remove("active");
        evt.preventDefault();
    };

    //upload more
    $(".importar").addEventListener("click", () => {
        $(".list-files").innerHTML = "";
        $("footer").classList.remove("hasFiles");
        $(".importar").classList.remove("active");
        $(".submit").classList.remove("active");
        setTimeout(() => {
            $("#drop").classList.remove("hidden");
        }, 500);
    });

    // input change
    $("input[type=file]").addEventListener("change", handleFileSelect);
})();

HTML

<form method="post" action="/" enctype="multipart/form-data" id="myForm">
    <header>
        <p>
            <span class="up">up</span>
            <span class="load">load</span>
        </p>
    </header>
    <div class="body" id="drop">
        <i class="fa fa-cloud-upload" aria-hidden="true" id="triggerFile"></i>
        <p id="text-upload" class="pointer-none"><a href="" id="triggerFile2">
            <strong>Browse</strong></a> to begin the upload
        </p>
        <input type="file" multiple="multiple" />
     </div>
     <footer>
         <div class="divider">
             <span>
                 <AR>FILES</AR>
             </span>
         </div>
         <div class="list-files">
             <!--   template   -->
         </div>
         <button class="importar">Clear</button>
         <button class="submit" type="submit" value="Submit"">Submit</button>
      </footer>
</form>

flask / python

import os
from flask import Flask, flash, request, redirect, render_template
from werkzeug.utils import secure_filename

app=Flask(__name__)

app.secret_key = "secret key"
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024

path = os.getcwd()
# file Upload
UPLOAD_FOLDER = os.path.join(path, 'uploads')

if not os.path.isdir(UPLOAD_FOLDER):
    os.mkdir(UPLOAD_FOLDER)

app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER


ALLOWED_EXTENSIONS = set(['xlsx', 'xls'])


def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS


@app.route('/')
def upload_form():
    return render_template('index.html')


@app.route('/', methods=['POST'])
def upload_file():
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        if file.filename == '':
            flash('No file selected for uploading')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            flash('File successfully uploaded')
            return redirect('/')
        else:
            flash('Allowed file types are txt, pdf, png, jpg, jpeg, gif')
            return redirect(request.url)


if __name__ == "__main__":
    app.run(host = '127.0.0.1',port = 5000, debug = False)

我试过这些链接:

1. https://www.theserverside.com/blog/Coffee-Talk-Java-News-Stories-and-Opinions/Ajax-JavaScript-file-upload-example
2. https://python.plainenglish.io/how-to-send-a-file-using-javascript-and-python-5038dc39707b
3. https://docs.faculty.ai/user-guide/apis/flask_apis/flask_file_upload_download.html

Answer 1

您必须首先在您的 html 中指定要调用的函数:<form method="post" action="{{url_for('upload_file')}}" enctype="multipart/form-data" id="myForm">并将名称传递给检测上传文件的输入元素:<input type="file" multiple="multiple" name="file[]" />

第二件事是在您的 upload_file() 中, 要获取上传的文件，您只需要使用此示例:uploaded_files = request.files.getlist("file[]") ，之后，您将能够通过对它们使用 for 循环来访问所有文件 for file in uploaded_files:

如果您有任何问题，请告诉我。