如何使用 fetch 将图像和文本从 React 正确发送到 Django API？

编程问答 2022-04-23

问题描述

我的 django API 视图设置如下；

class AddProductToStorageAPIView(APIView):
    parser_classes = [MultiPartParser,FormParser]

    def post(self,request,format=None):
        print(request.data) #I want to kNow what data is coming in for Now
        return Response({"details": "all done successfully"},status=200)

当我从邮递员（使用 formdata）发出 POST 请求时，数据 request.data 返回：

<QueryDict: {'title': ['Something'],'description': ['some description'],'price': ['600'],'category': ['A'],'Images': [<InMemoryUploadedFile: img-transparent_bg.jpg (image/jpeg)>]}>

但是，当我尝试从反应端发出 POST 请求时。事情变得如此混乱。首先这是我在反应方面的代码：

const handleSubmit = (e) =>{
        e.preventDefault();
        var headers = new Headers();
        headers.append("Content-Type","multipart/form-data");
        headers.append("X-CSrftoken",csrftoken)

        var formdata = new FormData();
        formdata.append("title",state.title);
        formdata.append("description",state.description);
        formdata.append("price",state.price);
        formdata.append("category",state.category);
        for (var i = fileinput.current.files.length - 1; i >= 0; i--) {
            formdata.append("Images",fileinput.current.files[0],fileinput.current.files[0].name);
        }//because the file input has 'multiple'='true' (i.e multiple files can be added)
        
        var requestOptions = {
          method: 'POST',headers: headers,body: formdata,redirect: 'follow'
        };

        fetch("http://127.0.0.1:8000/api/v1/plus/product/",requestOptions)
          .then(response => response.text())
          .then(result => console.log(result))
          .catch(error => console.log('error',error));
    }

但是，在提交时，我收到 400 bad request 错误提示 multipart form parse error - invalid boundary in multipart:None，我不知道这是什么意思。

然后，我将上面的 headers.append("Content-Type","multipart/form-data"); 更改为 headers.append("Content-Type","multipart/form-data;; boundary=--------------------------426310166704307097870742")，这是我从邮递员那里复制的（我也不知道我在这里做了什么）。因此，当我再次提交时，无边界错误消失了，但我的终端上出现了这个该死的数字和符号，我不知道这意味着什么。看起来像这样;

<QueryDict: {'title': ['So \r\n------WebKitFormBoundarydLnO3cP4KrAwpSAA\r\nContent-disposition: form-data; name="description"\r\n\r\nThis is them\r\n------WebKitFormBoundarydLnO3cP4KrAwpSAA\r\nContent-disposition: form-data; name="price"\r\n\r\n120\r\n------WebKitFormBoundarydLnO3cP4KrAwpSAA\r\nContent-disposition: form-data; name="category"\r\n\r\nShirt\r\n------WebKitFormBoundarydLnO3cP4KrAwpSAA\r\nContent-disposition: form-data; name="Images"; filename="profile-transparent_bg.jpg"\r\nContent-Type: image/jpeg\r\n\r\n����\x00\x10JFIF\x00\x01\x01\x01\x00`\x00`\x00\x00��\x00C\x00\x03\x02\x02\x03\x02\x02\x03\x03\x03\x03\x04\x03\x03\x04\x05\x08\x05\x05\x04\x04\x05\n\x07\x07\x06\x08\x0c\n\x0c\x0c\x0b\n\x0b\x0b\r\x0e\x12\x10\r\x0e\x11\x0e\x0b\x0b\x10\x16\x10\x11\x13\x14\x15\x15\x15\x0c\x0f\x17\x18\x16\x14\x18\x12\x14\x15\x14��\x00C\x01\x03\x04\x04\x05\x04\x05\t\x05\x05\t\x14\r\x0b\r\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14\x14��\x00\x11\x08\x01�\x01�\x03\x01"\x00\x02\x11\x01\x03\x11\x01��\x00\x1f\x00\x00\x01\x05\x01\x01\x01\x01\x01\x01\x00\x00\x00\x00\x00\x00\x00\x00\x01\x02\x03\x04\x05\x06\x07\x08\t\n\x0b��\x00�\x10\x00\x02\x01\x03\x03\x02\x04\x03\x05\x05\x04\x04\x00\x00\x01}\x01\x02\x03\x00\x04\x11\x05\x12!1A\x06\x13Qa\x07"q\x142���\x08#B��\x15R��$3br�\t\n\x16\x17\x18\x19\x1a%&\'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������\x00\x1f\x01\x00\x03\x01\x01\x01\x01\x01\x01\x01\x01\x01\x00\x00\x00\x00\x00\x00\x01\x02\x03\x04\x05\x06\x07\x08\t\n\x0b��\x00�\x11\x00\x02\x01\x02\x04\x04\x03\x04\x07\x05\x04\x04\x00\x01\x02w\x00\x01\x02\x03\x11\x04\x05!1\x06\x12AQ\x07aq\x13"2�\x08\x14B����\t#3R�\x15br�\n\x16$4�%�\x17\x18\x19\x1a&\'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������\x00\x0c\x03\x01\x00\x02\x11\x03\x11\x00?\x00�N�(����(\x00��(\x00��(\x00��(\x00��(\x00��(\x00��(\x00���/����\x07��\x1b�V��u]6M\x12�L�cty?��5��%\x14��m�(m\x14��m�\x06�K���\x00�(��\n(����\x1e���]�v�H\\��3@\x1f:~տ\x10\r�\x10����@����e��$�e�[�\x0f�o\x17_�3�V���W\x10��w!��݊�\x1a���� ^*���\x1a�2\x13+�\x1f?�$h���0)�QHaE\x14P\x07��\r\n------WebKitFormBoundarydLnO3cP4KrAwpSAA--\r\n']}>

有人请帮助我。我想要做的就是将图像（可能不止一个）和一些来自 react 前端的文本发送到我的 Django API。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

djangodjangodjango-registrationfetchfetchfetchjavascriptreactjsreactjsreactjsreactjs