flask Method not allowed 是什么问题? 上传文件一定要 return 当前页面的 html 吗?

参考了这个链接做一个上传文件背景处理的简单的网页。 flask upload file

这个是我的源代码 20180115150241

我想完成的功能是, 点击上传文件按钮, 提交两个输入框的内容, 然后根据这个数据框的内容和提交的文件做一个对应的处理。

如果 python 代码里面变成 "/getsum" 会出现一个 method not allowed 的问题。
如果 python 代码里面使用"/", 那么整个页面的内容就被修改成返回值了。

照搬官网文档上的代码, 是可以上传文件的, 但是我需要上传文件的同时也获取两个输入框的内容, 所以我把 '/' 变成了 '/getsum', 然后在 html 文件里面添加 jquery 做绑定。但是现在的问题是一点击那个提交上传文件的按钮就跳出来 method not allowed 的问题, 网上找了一下说是修改成 post 方式, 这个也修改了, 还是不行麻烦大神给看下。

这个是 jquery 代码

      <script type=text/javascript>
        $(function() {
            $('#getsum').click(function(){
              $.ajax({
                url: '/getsum',
                data:{
                  classfy: $('#classifyitem').val(),
                  sumitem: $('#sumitem').val()
                },
                dataType: 'JSON',
                type: 'POST',
                success: function(data){
                    $("#sumresult").html(data.result);
                }
                });
             });
        });
  </script>

这个是 python 代码

#@app.route('/', methods=['GET', 'POST'])
# 这里我改了自己的 route getsum
@app.route('/getsum', methods=['GET', '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 user does not select file, browser also
        # submit a empty part without filename
        if file.filename == '':
            flash('No selected file')
            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))
            return redirect(url_for('uploaded_file',
                                    filename=filename))
    return '''
    <!doctype html>
    <title>Upload new File</title>
    <h1>Upload new File</h1>
    <form method=post enctype=multipart/form-data>
      <p><input type=file name=file>
         <input type=submit value=Upload>
    </form>
    '''

这个是完整的 html 代码

<!DOCTYPE html>
  <html lang="en">
    <head>
      <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
      <script type=text/javascript>
        $(function() {
            $('#getsum').click(function(){
              $.ajax({
                url: '/getsum',
                data:{
                  classfy: $('#classifyitem').val(),
                  sumitem: $('#sumitem').val()
                },
                dataType: 'JSON',
                type: 'POST',
                success: function(data){
                    $("#sumresult").html(data.result);
                }
                });
             });
        });
  </script>
  <style>
    #getsum {
        color: green;
    }
  </style>
  </head>
<hr />
<h3>图片上传, 注意条目名称要完全一致</h3>
  <h4>
 <div><strong>分类条目(多个分类用逗号隔开):</strong> <input id="classifyitem" name="classifyitem" size="20" type="text" /></div>
   </h4>
  <br>
 <h4>
 	<div><strong>求和条目(只能有一个条目):</strong> <input id="sumitem" name="sumitem" size="20" type="text" /></div>
 </h4>
  <!-- <h4 class="text-muted">上传需要处理的文件</h4> -->
<hr />
    <form enctype="multipart/form-data" method="post"><input name="file" type="file" /> 
    <input id="getsum" type="submit" value="上传文件并开始处理" />
    <div><strong>处理完毕的文件:</strong> <span id="sumresult">等待处理</span></div>
</form>
<br />
<br />