React使用Axios上传视频到Flask报KeyError: 'file'如何解决

你遇到的KeyError: 'file'报错由前后端两处代码错误共同导致，直接按以下方案修改即可完成视频上传功能：

后端错误点 #

request.files.get是方法调用，需要用圆括号()而非方括号[]，原代码写法相当于从get方法本身取值，自然拿不到文件参数。同时需要补充文件存在性判断、上传目录配置，避免空值和路径报错。

修复后后端完整代码 #

import os
from flask import Flask, request

app = Flask(__name__)
# 配置上传目录，自动创建不存在的目录
app.config['UPLOAD_FOLDER'] = './video_upload'
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
# 配置最大上传大小，示例为1GB，可自行调整
app.config['MAX_CONTENT_LENGTH'] = 1024 * 1024 * 1024

@app.route("/releaseVideo", methods=["POST"])
def release():
    # 修正get方法调用格式
    request_data = request.files.get("file")
    # 提前判断是否拿到文件
    if not request_data:
        return {"msg": "未获取到上传文件"}, 400
    try:
        # 用原文件名保存，也可自定义文件名避免重复
        save_path = os.path.join(app.config['UPLOAD_FOLDER'], request_data.filename)
        request_data.save(save_path)
        return {"msg": "上传成功", "save_path": save_path}, 200
    except Exception as e:
        print('文件保存失败：', str(e))
        return {"msg": "文件保存失败"}, 500

if __name__ == '__main__':
    app.run(debug=True)

如果开发环境存在跨域，需要安装flask-cors配置跨域支持。

前端错误点 #

1. 你直接获取了input的DOM元素放入FormData，实际要取的是DOM元素files属性里的选中文件
2. Axios的POST请求体用data字段传递，不是fetch的body字段，参数名写错导致后端拿不到请求数据

修复后前端完整代码 #

const upload_file = (event) => {
    event.preventDefault()
    // 取input DOM的files属性的第一个选中文件
    const fileInput = document.querySelector('input[type="file"]')
    const file = fileInput.files[0]
    if (!file) {
        alert('请先选择要上传的视频文件')
        return
    }
    const formdata = new FormData()
    formdata.append("file", file);
    // 修正Axios参数，用data传请求体
    axios("/releaseVideo", {
        method: 'POST',
        data: formdata,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
    .then(res => console.log('上传成功', res))
    .catch(err => console.warn('上传失败', err));
}

return (
    <>
        <form onSubmit={upload_file}>
            <label>Title: </label><br />
            <input type="text" onChange={onTitleChange} value={title}/><br />
            <label>Description:</label><br />
            <textarea value={textArea} onChange={onTextAreaChange}></textarea><br />
            {/* 加accept属性限制只能选择视频文件 */}
            <input type="file" id="file" accept="video/*"/>
            <input type="submit" value="Upload Video!" />
        </form>
    </>
)

额外注意事项 #

• 大视频上传建议加分片上传逻辑，避免单次请求超时
• 建议对上传的视频文件名做重命名处理，避免中文、特殊字符导致的保存错误，也可避免同名文件覆盖

内容的提问来源于stack exchange，提问作者Koussay Dhifi