V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
sudoy
V2EX  ›  问与答

原生 javascript 向 flask 服务器 post 文件

  •  
  •   sudoy · Nov 15, 2021 · 1260 views
    This topic created in 1636 days ago, the information mentioned may be changed or developed.

    想把文件从前端传到 flask 服务器,官方介绍的方式没问题,但是官方的方法是服务端渲染的。我想用 JavaScript 的fetch()上传,测试下来一直出错。请各位老哥,问有没有 JavaScript 原生的方法(不用其他第三方 JavaScript 框架)可以实现的?先行谢过!

    Supplement 1  ·  Nov 16, 2021

    文件夹结构如下:

    根目录下面有一个app.py, 一个 templates 文件夹,和一个 upload 文件夹。 templates 文件夹 有 index.htmlupload 文件夹为空。

    代码如下:

    app.py:

    import os
    from flask import Flask, request, render_template
    from werkzeug.utils import secure_filename
    
    
    UPLOAD_FOLDER = 'upload'
    
    app = Flask(__name__)
    app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
    
    
    @app.route('/', methods=['GET'])
    def index():
        return render_template('index.html')
    
    
    @app.route('/v1/upload', methods=['GET', 'POST'])
    def upload_file():
        if request.method == 'POST':
            file = request.files['file']
            if file:
                filename = secure_filename(file.filename)
                file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
                return 'done'
    
    
    if __name__ == '__main__':
        app.run()
    
    
    

    template/index.html (字数限制,只能通过笔记分享代码) https://www.v2ex.com/p/8Qqvb3HH

    报错如下:

    另外一种index.html 写法(也报错):https://www.v2ex.com/p/A2hG421q

    疑似问题

    根据网上搜索结果,似乎是 flask 只接受加密类型为multipart/form-data的formData。而这个案例的问题好像在于flask服务器不认识 JavaScript fetch()body 数据类型。

    Supplement 2  ·  Nov 16, 2021
    更新:2021-11-16 11:01 am

    找到一个帖子遇到相似的问题,按照这个帖子的思路修改,但还是没有成功。
    https://stackoverflow.com/questions/66039996/javascript-fetch-upload-files-to-python-flask-restful
    4 replies    2021-11-16 19:44:33 +08:00
    SilencerL
        1
    SilencerL  
       Nov 15, 2021   ❤️ 1
    报错信息是啥,你这一点儿错误信息描述都没有咋判断是啥情况;
    用 fetch 或者 xhr 都能实现上传的功能,就算是第三方的库也是基于 fetch 或者 xhr 封装的。

    顺便建议阅读:
    https://github.com/selfteaching/How-To-Ask-Questions-The-Smart-Way/blob/master/How-To-Ask-Questions-The-Smart-Way.md#be-precise-and-informative-about-your-problem
    sudoy
        2
    sudoy  
    OP
       Nov 16, 2021
    @SilencerL 感谢回复!我更新了一下提问,并 append 在这个贴子上。代码和报错我都截图了。
    SilencerL
        3
    SilencerL  
       Nov 16, 2021   ❤️ 1
    @sudoy #2
    看了下主要是 js 写的有点问题:
    - 不用显示指定 『"Content-Type": "multipart/form-data"』
    - body 需要一个 FormData 对象

    ----------

    修改后的 upload 函数(部分):

    const data = new FormData();
    data.append("file", file);

    await fetch('/v1/upload', {
    method: 'POST',
    body: data
    });
    sudoy
        4
    sudoy  
    OP
       Nov 16, 2021 via iPhone
    @SilencerL 非常感谢🙏
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2973 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 37ms · UTC 08:40 · PVG 16:40 · LAX 01:40 · JFK 04:40
    ♥ Do have faith in what you're doing.