python + layui.upload 上传文件，同时提交其它字段

我的设计是点击【按钮】的时候打开弹窗，弹窗里的表单包含上传文件和其它字段。

点击弹出层的按钮：

<button class="layui-btn" id="upload_btn"><i class="layui-icon">&#xe654;</i>导入HAR</button>

js：

layui.use(['layer','upload','form'], function(){
    var $ = layui.jquery, layer = layui.layer, upload=layui.upload;
    $('#upload_btn').click( function(){
        var uploadInst;
        var index = layer.open({
            title:'导入文件',
            type: 1,
            shade:0.4, ////遮罩透明度
            area: ['400px', '250px'],
            content: '<div id="import_har" style="margin-top: 20px;margin-left: 20px">\n' +
                '    <form class="layui-form layui-form-pane">\n' +
                '        <div class="layui-form-item">\n' +
                '            <label class="layui-form-label">输入框</label>\n' +
                '            <div class="layui-input-block">\n' +
                '                <input type="text" name="input_name" required lay-verify="required" placeholder="请输入..." class="layui-input" style="width: 90%">\n' +
                '            </div>\n' +
                '        </div>\n' +
                '        <div class="layui-form-item">\n' +
                '            <div class="layui-btn-container upload-file-box">\n' +
                '                <button type="button" class="layui-btn" id="har_file"><i class="layui-icon">&#xe67c;</i>上传文件</button>\n' +
                '            </div>\n' +
                '        </div>\n' +
                '        <div>\n' +
                '            <div class="layui-input-block" style="text-align: right;margin-right: 20px;margin-top: 10px;">\n' +
                '                <button lay-submit="" type="button" class="layui-btn" id="commit">立即提交</button>\n' +
                '            </div>\n' +
                '        </div>\n' +
                '    </form>\n' +
                '</div>',
            id: 'page1', //定义 ID，防止重复弹出
            success:function () {
                uploadInst=upload.render({
                    elem: '#har_file',
                    url:'/import_har/',  //上传接口
                    accept: 'file',
                    acceptMime: 'file|har',
                    exts: 'har',
                    auto: false, //自动上传关闭
                    multiple: false,//关闭多文件上传
                    drag: false,//禁止拖拽上传
                    bindAction: '#commit',
                    before: function(){  //文件提交上传前的回调
                        this.data = {  //传给后台的参数
                            input_name: $('input[name="input_name"]').val()
                        };
                        if (this.data.input_name===''){
                            return false;
                        }else {
                            layer.load(2);
                        }
                    },
                    done: function(res){  //上传完毕回调
                        if(res.code === 0){
                            layer.closeAll('loading');
                            layer.close(index);
                            layer.msg(res.msg);
                        }else {
                            layer.closeAll('loading');
                            layer.close(index);
                            layer.alert(res.msg,{icon: 5,title: '提示'});
                        }
                    },
                    error: function(){  //请求异常回调
                        layer.closeAll('loading');
                        layer.msg('提交错误',{icon: 5,title: '提示'});
                    }
                })
            },
        });
    })
})

这里弹出层的div必须将代码写在content里，不能使用选择器，否则会有个Bug：第二次打开弹窗的时候，选择上传文件后不会显示文件的名称。

before回调里面需要判断一下输入框是否为空，为空的话 return false阻止上传，否则会有个bug：当输入框为空、但是有选择文件的时候，点击【提交】，还是会去请求接口

upload.render参数说明

参数	说明
elem	指向容器选择器，如：elem: '#id'。也可以是DOM对象
url	请求的接口
data	传给接口的额外参数，如：data:
headers	接口的请求头。如：headers:
accept	指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
acceptMime	规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如：acceptMime: 'image/*'（只显示图片文件） acceptMime: 'image/jpg, image/png'（只显示 jpg 和 png 文件）
exts	允许上传的文件后缀。一般结合 accept 参数类设定。
auto	是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个按钮提交上传
bindAction	指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象
field	设定文件域的字段名
size	设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
multiple	是否允许多文件上传。设置 true即可开启。不支持ie8/9
number	设置同时可上传的文件数量，一般配合 multiple 参数出现。
drag	是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9
field	设定文件域的字段名

回调参数	说明
choose	选择文件后的回调函数。返回一个object参数
before	文件提交上传前的回调。返回一个object参数
done	执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。
error	执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）。

接口返回的响应信息（response）必须是一个标准的 JSON 格式

接口处理：

basedir = os.path.abspath(os.path.dirname(__file__))  # 项目路径
UPLOAD_PATH = os.path.join(basedir, 'upload')    #上传/下载路径
ALLOWED_EXTENSIONS = ['har']  #允许上传文件类型

# 判断文件类型
def allowed_file(filename):
  return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

# 上传har文件
@app.route('/import_har/',methods=['post'])
def import_har():
    input_name = request.values.get('input_name')
    file = request.files['file']
    print('input_name:',input_name,'file:',file)

    if file and allowed_file(file.filename):
        file_dir = os.path.join(UPLOAD_PATH,file.filename)  # 要增加的文件
        add_obj = File(file_name=file.filename, input_name=input_name)  # 数据库要增加的内容
        if not os.path.exists(file_dir):  # 如果该文件不存在
            try:
                file.save(file_dir)
                db.session.add(add_obj)
                db.session.commit()
                return jsonify({'code': 0,'msg': '上传成功'})
            except Exception as e:
                return jsonify({'code': e, 'msg': '操作失败，请重试'})
        else:
            return jsonify({'code': 1, 'msg': '文件已存在','file':file_dir})
    else:
        return jsonify({'code': 2, 'msg': '上传格式错误'})

我是将文件名称存数据库，将文件保存在本地的。
表结构：

class File(db.Model):
    __tablename__ = 'file'  # 表名
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)  # 主键
    file_name = db.Column(db.String(200), nullable=False)      # 分类名称、不能为空
    input_name = db.Column(db.String(200), nullable=False)     # 不能为空