【文件上传】Flask与axios结合,通过ajax上传文件

文件上传flask按照后端官网示例:

# 导入flask基本内容
from flask import Flask, request, jsonify
import flask_cors
# 用于设置文件安全名
from werkzeug.utils import secure_filename
app = Flask(__name__)
# 允许跨域
flask_cors.CORS(app)
@app.route("/uploadfile", methods=['post'])
def upload_file():
    try:
        f = request.files.get("pic")
        # 可以直接通过/static/文件名 访问到
        f.save('./static/' + secure_filename(f.filename))
        place = './static/' + secure_filename(f.filename)
        print(f)
    except Exception as e:
        pass
    return jsonify({
        'data': {
            'status': 'ok',
            'url': place
        }
    })


if __name__ == '__main__':
    app.run(
        host='0.0.0.0',
        port=9999
    )

这一步后端比较简单,大概上就是通过request.files.get加上约定的key值(这里是pic)拿到图片,然后调用save保存到相应路径,再将地址返回

而前端我们选择基于axios进行发送,通过axios发送需要进行一些配置
首先来看不通过ajax发送的方式,这会让页面跳转到http://127.0.0.1:9999/uploadfil 上传图片的界面

    <form action="http://127.0.0.1:9999/uploadfile" enctype="multipart/form-data" method="post">
        <input accept="image" type="file" name="pic" />
        <button type="submit">提交</button>
    </form>

而通过ajax发送,则可以直接添加如下事件

        let input = document.querySelector('input');
        input.addEventListener('change', (eve) => {
            console.log(eve)
            // 拿到图片
            let img = eve.target.files[0];
            // 构造表单数据
            let formData = new FormData();
            formData.append('pic', img)
            // 发送
            console.log(formData.get('pic'))
            // 设置配置
            let config = {
                // 添加请求头
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                // 添加文件上传进度监听
                onUploadProgress: e => {
                    console.log(e)
                }
            }
        // 发送请求
            axios.post("http://127.0.0.1:9999/uploadfile", formData, config)
        })
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇