javascript - 使用 Fetch 后，发送 formData 时我仍然在 react.js 中得到多部分边界

Question

在使用 Axios、react.js 和 multipart/formdata 时，我非常困惑如何解决这个多部分边界。我已经坚持了 2 周来尝试解决这个问题，但我觉得我离解决它越来越近了，但无论我尝试什么解决方案，它仍然卡住了。

我阅读并尝试了这个主题的一些解决方案:

how-to-post-multipart-formdata-using-fetch-in-react-native

how-to-send-multipart-form-data-with-antd-upload-react

how-to-send-a-multipart-form-data-from-react-js-with-an-image

这是我在 orderAction.js 中的 create Order 函数:

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);
        //         }
        //     })
    };
}

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

编辑 1在尝试使用@narasimha 解决方案后，我终于摆脱了多部分边界，但我得到了奇怪的行为，其中数据成功编码如下:

但是当我尝试检查响应时，photoUrl 返回 null 或 `` 像这样:

当我尝试使用 insomnia 或 postman 时，它成功生成了这样的 photoUrl:

我哪里错了？

Answer 1

我昨天遇到了同样的问题。问题出在内容类型上。我使用了与您使用的相同的内容类型 header 。问题是我删除了内容类型并允许 fetch () API 自动处理它。成功了!!