通过form上传图片后端request.files为空，但是通过js提交请求缺可以获得上传图片的问题

本文链接：https://blog.csdn.net/qq_40999942/article/details/122646753

JS大概是这样提交的：

var form_data = new FormData(document.getElementById("MainForm"));

$.ajax({
url: "{{url_for('main.dm_form', data_code=data_model.data_code)+'?record_id='+record.id|string }}"
type: "post",
        data: form_data,
        processData: false,
        contentType: false,
        success: result => {
            ...

之所以不想用js提交，是因为表单及表单数据验证用的是Flask_WTF，JS提交这些验证无法在页面体现，如xx字段必填，xx自动值范围等等。

表单里面有一个上传图片控件。

前面发现的问题是如标题，form提交到后台接收不到文件，js调接口却可以。

最后发现问题解决方法很简单，就是form要加上enctype="multipart/form-data"。

<form class="layui-form" method="post" accept-charset="UTF-8" enctype="multipart/form-data" id="MainForm">

用html的form上传文件时，request.FILES为空，没有收到上传来的文件，但是在request.POST里找到了上传的文件名（只是一个字符串）。

解决方法：

为form表单规定enctype属性，其值为”multipart/form-data”。

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为 “+” 加号，但不对特殊字符编码。