多部分表单解析错误 - 多部分中的无效边界：无。

Question

我感到非常沮丧，找不到解决方法：

我正在使用AngularJS和Node.js创建一个项目。我从AngularJS中获取图像数据，在Node.js中将此数据发送到进一步的API。我遇到了错误。

{
  "error": {
    "detail": "Multipart form parse error - Invalid boundary in multipart: None"
  }
}

这是我在 Node.js 侧的代码：

var request = require('request');
    console.log(req.files);
var data = {

        website:'www.gamail.xom',
        contact_number:'dsdsd',
        services_offered:'dsadasd',
        contact_name:'dasdas',
        provider_category:'exchange',
        email:'[e-mail]',
        image:req.files

    }
var api_url = global.common.base_url + 'vcard/1.0.0/visit_card/' + req.param('uuid') +'/';
    request({
        url: api_url,
        method: 'PUT',
        headers: {
            'Content-Type': 'multipart/form-data',
            'Authorization': 'Bearer '+req.cookies.apitoken
        },
        json: data

    }, function(error, response, body) {
        if(response.statusCode == 200 && !error){
            res.end(JSON.stringify(body));
        }else{          
            res.send(response.statusCode, { error: body });
        }
    });
}

在 req.files 中获得。

{ image:
   [ { fieldName: 'image[0]',
       originalFilename: 'icon_dd_chart_grey.png',
       path: 'C:\\Users\\karakuma\\AppData\\Local\\Temp\\op74_gLSzPs-_49aT1GF0si
7.png',
       headers: [Object],
       size: 1474,
       name: 'icon_dd_chart_grey.png',
       type: 'image/png' } ] }

- Karan

---

你是如何解决这个问题的？还是它仍然没有解决？ - Loi Nguyen Huynh

尝试移除Content-Type头？ - Puvipavan

Answer 1

尝试按以下方式定义内容类型。

content_type='multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'

我曾遇到同样的问题，在Python中这个方法适用于我。

- Aamir Five

---

当然，我可以为您翻译此句话：“你能解释一下@Aamir这里正在发生什么吗？” - alkadelik

这可能是一个正确的解决方案，但如果没有任何解释的话，似乎毫无用处。 - Paullo

@DGG 说实话，我对此一无所知。我只是对答案做了一个非常简单的编辑。但是这个问题可以参考 https://dev59.com/ZHA75IYBdhLWcg3wB0VP 或者 https://duckduckgo.com/?q=multipart%2Fform-data%3B+boundary%3D----&t=ffab&atb=v267-1&ia=web。 - Axel

很高兴能帮助你，@DGG！ - Axel

对于使用 fetch 的人来说：如果您试图手动设置此标头并将 FormData 对象作为主体提供，那么也会发生此错误。 您只需要提供 FormData 对象，fetch 将自动为您设置此标头。 [参考/信息] (https://github.com/github/fetch/issues/505#issuecomment-293064470) - StandardIO

Answer 2

我在上传文件时也遇到了这个问题。对我来说，问题是 FormData 来的不是 FormData实例

所以我使用下面的代码将对象转换为 FormData：

const getFormData = object => Object.keys(object).reduce((formData, key) => {
            formData.append(key, object[key]);
            return formData;
        }, new FormData());

而刚刚执行了我的POST请求，在我的情况下使用Vue资源：

return Vue.http.post(url,
        getFormData(formData),
        {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

- Nishant Patel

Answer 3

不需要在头部中提及内容类型，fetch()会自动检测其内容类型。

let formData = new FormData()
formData.append("email", email);
formData.append("password", password);
formData.append("image", image);

const response = await fetch('http://localhost:8000/api/authentication/register/', {
                method: 'POST',
                headers: {'X-CSRFToken': csrftoken}, //django specific
                body: formData,
            });

- Yogesh Bisht

Answer 4

边界只是分隔多部分有效载荷的“关键”。通常像“&”这样的东西足以分隔变量，但您需要更独特的内容来分隔有效载荷中的负载comment。

您可以使用任何不在发送数据中出现的值。

注意：由于边界分隔符不能出现在被封装的主体部分中，用户代理必须小心选择唯一的边界参数值。

最简单的边界分隔符行可能是像“---”这样的内容，具有“-----”的关闭边界分隔符行。

- tabebqena

Answer 5

删除'Content-Type': 'multipart/form-data'。然后它就可以正常工作了。

- joe

Answer 6

我在使用Angular 11连接Django Rest API时遇到了问题，我能够使用类似以下的curl命令上传一个带有表单的JSON：

curl -X POST -S \
  -H 'Accept: application/json' \
  -u "user:password" \
  -F "name=name" \
  -F "label=mylabel" \
  -F "otherfields=something" \
  -F "photo=@./example.png;type=image/png" \
  http://127.0.0.1:8000/api/v1/item/

但是我在使用我的头文件作为httpOptions时遇到了这个异常：

'content-type': 'multipart/form-data',

所以我刚刚注释掉了content-type，似乎角度很聪明，它会为您创建头文件，并将多部分设置与边界一起。

欲了解更多信息： multipart/form-data中的边界是什么？

- nck