V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
woshichuanqilz
V2EX  ›  Flask

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

  •  
  •   woshichuanqilz · 2018-01-15 15:02:59 +08:00 · 3702 次点击
    这是一个创建于 2538 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    这个是我的源代码 20180115150241

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

    1. 如果 python 代码里面变成 "/getsum" 会出现一个 method not allowed 的问题。
    2. 如果 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 />
    
    
    4 条回复    2018-02-23 18:01:21 +08:00
    woshichuanqilz
        1
    woshichuanqilz  
    OP
       2018-01-15 15:18:26 +08:00
    我的想法是用 ajax 绑定页面上的提交按钮到 /getsum, 然后在 python 代码里面配置 getsum 这个函数, 获取我需要的内容。
    fiht
        2
    fiht  
       2018-01-15 15:48:22 +08:00
    <form enctype="multipart/form-data" method="post"><input name="file" type="file" />
    <input id="getsum" type="submit" value="上传文件并开始处理" />
    你的这个点击会先被 ajax 事件绑定然后还会执行一个提交表单的操作。所以 flask 的日志是下面的这样子:
    127.0.0.1 - - [15/Jan/2018 15:44:55] "POST /getsum HTTP/1.1" 200 -
    127.0.0.1 - - [15/Jan/2018 15:44:55] "POST / HTTP/1.1" 405 -
    xiaobai9927
        3
    xiaobai9927  
       2018-01-23 10:20:50 +08:00
    我是 flask 小白,也是刚学。不懂 jquery,不过能懂题主的意思。

    我觉得有两种,要么你文字内容和文件内容放在一个 form 里面,ajax 提交后,两块内容用一个 view 路由来操作保存某个地方或者保存到数据库。要么你用两个 form 提交,分别指向两个路由,然后操作数据。

    不知道对不对。。。
    frostming
        4
    frostming  
       2018-02-23 18:01:21 +08:00
    既然你的 form 是用 ajax 提交到 /getsum,那 getsum 函数就只用 methods=['POST'],处理数据后返回一个 JSON object 就行了,渲染页面还是在('/')下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2062 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:44 · PVG 08:44 · LAX 16:44 · JFK 19:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.