如何将带文件上传的Dart POST请求转换为可正常运行的JavaScript代码

问题排查及修复 #

你代码里的400错误由以下几个问题导致：

• 错误设置no-cors模式：mode: 'no-cors'会限制请求可发送的头部，且返回的响应为不透明类型，无法读取状态码和响应体，也会导致请求格式不符合服务端预期。若存在跨域问题，需服务端配置CORS响应头，不要开启no-cors。
• 手动指定multipart/form-data请求头：使用FormData作为请求体时，浏览器会自动生成带boundary分隔符的Content-Type: multipart/form-data; boundary=----xxxx头，你手动指定该头会丢失boundary参数，导致服务端无法正确解析表单内容，直接删掉该header配置即可。
• data字段传递格式不符合原逻辑：原Dart代码中data是普通字符串类型的表单字段（值为JSON序列化后的字符串），你用Blob包裹后会被识别为文件字段，和服务端预期的字段类型不匹配，直接传递序列化后的字符串即可。
• 语法错误：res是try代码块内的局部变量，在try外访问res.status会报错。

修复后的完整代码 #

const handleSubmit = async (e) => {
    e.preventDefault();
    const data = new FormData();
    // 直接传JSON字符串，不需要Blob包裹
    const jsonData = JSON.stringify({
      name: somevalue,
      contact: somevalue,
      location: {
        country: somevalue,
        state: somevalue,
        city: somevalue
      },
      videoGame: {
        name: somevalue,
        type: somevalue,
        console: somevalue,
      }
    });
    data.append('data', jsonData);
    data.append('image', file_from_input);

    try {
      const res = await fetch('你的接口完整地址',{
        method:'POST',
        cache: 'default',
        // 删掉no-cors和手动的Content-Type头
        body: data
      });
      console.log('Status', res.status);
      const data_ = await res.json();
      console.log(data_);
    } catch (e) {
      console.log("请求错误 =>", e);
    }
}

服务端调试建议 #

如果还是有问题，可以在Python服务端加上日志打印整个请求的表单内容，示例（Flask框架为例）：

from flask import request
@app.route('/insertData', methods=['POST'])
def insert_data():
    print("收到的表单字段：", request.form)
    print("收到的文件：", request.files)
    # 后续逻辑

内容的提问来源于stack exchange，提问作者Yahya Abdollah