使用 ajax jquery 發送文件並使用 Flask 在后端讀取它

Question

我正在嘗試使用 ajax jquery 從前端發送文件。

HTML

<label>Upload File </label>
<form method='post' enctype="multipart/form-data">
    <input type='file' id='uploaded_file'>
    <button id="submit-file">Submit</submit>
</form>

JavaScript

<script>
    
    $(document).ready(function(){

        $("#submit-file").click(function(event){

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

            $.ajax({
                url:"/read_uploaded_file",
                type:"POST",
                contentType: false,
                cache: false,
                processData: false,
                data: form_data,
                success: function(data){
                    console.log("Successful data upload");
                },
                error: function(data){
                    console.log("Error !!");
                }

            });
        });
    });
</script>

在后端，我使用 flask 來讀取文件。

@app.route('/read_uploaded_file',method=["GET","POST"])
def read_uploaded_file():
    uploaded_file = request.files['file']

我收到一條錯誤消息POST (URL) 405 (METHOD NOT ALLOWED) ，我在這里做錯了嗎？ 我如何解決它？

Answer 1

POST (URL) 405 (METHOD NOT ALLOWED) 錯誤是由跨域資源共享 (CORS) 引起的。

為了解決這個問題，在后面添加了 CORS：

from flask_cors import CORS

app= Flask(__name__)
CORS(app)

Answer 2

在您的.py文件中，它不是method=["GET","POST"] ，而是methods=["GET","POST"] 。 試試它是否有效，在改變它之后。

@app.route('/read_uploaded_file',methods=["GET","POST"])
def read_uploaded_file():
    uploaded_file = request.files['file']