Question

在我的开发工作中遇到了一些障碍。我正在尝试上载要使用FormData发送的照片。我猜我的问题出在我的内容标头或后端处理中。无论如何，我似乎都找不到解决方法。我希望你们能帮助我

general.js -这是我的请求处理程序

 export const postDataWithImage = (url, data) => {
        return fetch(url, {
            body: data, // must match 'Content-Type' header
            credentials: 'same-origin', //pass cookies, for authentication
            method: 'POST',
            headers: {
                'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
        })
            .then(response => response.json()); // parses response to JSON
    };

user-creation.js -我对上述功能的实际使用（发送多个数据）

这是我发送的数据的图像！[1] https://imgur.com/leBlC7L

const data = {...this.state, ...form};
        const formData = new FormData();
        Object.entries(data).forEach(([key, value]) => formData.append(key, value));

postDataWithImage('/users', data)
            .then(data => {
                if (data.error) {
                    console.log("theres an error");
                    this.setState({
                        error: data["error"]
                    });
                    console.log(this.state.error);
                } else {
                    console.log(data["data"]);
                }
            })
            .catch(error => message.warning(error.message));

views.py -我的使用Django REST的后端处理程序没有：这返回一个错误，要么字节没有属性'get'...，要么是request.FILES为空的ModelDict。

  @staticmethod
    def post(request):
        print(request.body.get('image'))
        print(request.FILES)
        if "username" not in request.data or "password" not in request.data:
            return Response(data={
                "error": "Missing username or password"
            }, status=400, content_type="application/json")
        return Response(data=data, status=200, content_type="application/json")

请帮助我，我真的很困。谢谢！

Answer 1

我使用Vue.js和Django遇到类似的问题。最后，我注意到问题在于： boundary未设置为标题。

解决方案是像这样从您的请求中删除headers：

fetch(url, {
            body: data,  // assume this is some binary data
            method: 'POST',
})

然后，您的浏览器将自动为您的请求添加适当的标题。然后，您会在浏览器的请求标题中看到boundary字段。

Answer 2

尝试从 fetch 的标题中删除“Content-Type”

Answer 3

我可以在 Content-Type 请求的 fetch 标头中看到问题。由于您正在传递其中包含图像的 FormData，因此必须将标题更新为：

 export const postDataWithImage = (url, data) => {
        return fetch(url, {
            body: data, // must match 'Content-Type' header
            credentials: 'same-origin', //pass cookies, for authentication
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD'
            },
        })
            .then(response => response.json()); // parses response to JSON
    };

如何使用React，fetch和Django REST

3 个答案: