使用 Fetch 后，我仍然在 react 中获得了多部分边界.js发送表单数据

Question

在使用Axios、html" target="_blank">react时，我严重混淆了如何解决这个多部分边界。js和多部分/formdata。我已经坚持了两周来尝试解决这个问题，但我觉得我离解决它越来越近了，但无论我尝试什么解决方案，它仍然坚持。

我从这个主题中阅读并尝试了一些解决方案：

如何-后-多部分-表单数据-使用-获取-在-反应-本机

如何发送多部分表单数据与上传反应

如何发送-多部分-表单-数据-来自-反应-js-与-图像

这是我在orderAction中的创建订单函数。js：

function createOrder(data) {
    return dispatch => {
        let apiEndpoint = 'order';
        let payload = new FormData();
        // payload.append('orderImage', data.orderImage);

        // console.log("Cek Image : ", data.orderImage);
        for (const file of data.orderImage) {
            payload.append('orderImage', file)
        }

        payload.append('userId', data.userId);
        payload.append('materialId', data.materialId);
        // payload.append('materialId', '5d79930c8c4a882f44b1b0fb');
        payload.append('color', data.color);
        payload.append('description', data.description);
        payload.append('quantity', data.quantity);
        payload.append('city', data.city);
        payload.append('detailAddress', data.detailAddress);

        console.log("Cek Data : ", payload);

        fetch(config.baseUrl + apiEndpoint, {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer ' + localStorage.getItem('token'),
                'Content-Type' : 'multipart/form-data; boundary=----WebKitFormBoundaryHl8DZV3dBSj0qBVe'
            },
            body: payload
        })
        // orderService.post(apiEndpoint, payload)
        //     .then(res => {
        //         if(res.data.status === 200) {
        //             alert(res.data.Message);
        //             dispatch(createOrderSuccess(res.data));
        //             history.push('/user-order');
        //         } else {
        //             dispatch(createOrderFailed());
        //             alert(res.data.Message);
        //         }
        //     })
    };
}

有人能帮我解决这个问题吗？我对这个问题很困惑

在尝试使用@narasimha解决方案后编辑1，最后我去掉了多部分边界，但我得到了奇怪的行为，数据成功地编码如下：

但当我尝试检查响应时，photoUrl返回null或``如下：

当我尝试使用失眠症或邮递员时，它成功地生成了如下photoUrl：

我在这里哪里搞错了？

Answer 1

我昨天也遇到了同样的问题。问题是内容类型。我使用了与您使用的相同的内容类型标头。问题是我删除了内容类型并允许fetch（）API自动处理它。它起作用了！！