javascript - 如何使用 React、fetch 和 Django REST 上传图片

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',
})

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