Javascript 如何在不使用django表单的情况下从fetch post接收django视图中的图像文件

在这个项目中，我使用了不同的流程方法。我没有使用传统的django表单，也没有使用django模板标记。我使用香草javascript获取所有数据操作。我的所有fecth配置都正常我已将

enctype=“multipart/form data”

和

{%csrf\u token%}

添加到我的表单中，这是我的html，对应于手头的问题：

我现在的问题是，我想上传一个图像文件到我的服务器。为此，我有以下代码：

//My event listener
submit_btn.addEventListener("click", (event) => {
    event.preventDefault();
    const user = new Users();

    user_image_upload = image_upload.value
    user_image_file_field = image_file_field.files[0]
    ...

    // My object i send to the server
    post_user_info_object = {
        obj_user_image_upload: user_image_upload,
        obj_image_file_field: user_image_file_field,
        ....
    }
}

当我发布表单时，这是我在javascript控制台上打印的图像：

接下来，当它到达服务器时，它看起来是这样的（我先在图像之前发布代码）：

以下是显示结果的控制台打印输出图像：

以下是发送到服务器的代码：

class Users {
    // Sending user info to server
    async postUserInfo (token, data_elements) {
        const options = {
            method: 'POST',
            body: JSON.stringify(data_elements),
            headers: {
                'Content-type': 'application/json; charset-UTF-8',
                'X-CSRFToken': token
            }
        }

        let result = await fetch ('http://127.0.0.1:8000/accounts/edit-profile/', options);
        let data = await result.json();

        return data;
    }
}

这是我运行所有程序的初始化代码：

submit_btn.addEventListener("click", (event) => {
    event.preventDefault();
    const user = new Users();

    user_image_file_field = image_file_field.files[0]

    post_user_info_object = {
        obj_image_file_field: user_image_file_field
    }
    user.postUserInfo(csrftoken, post_user_info_object)
    .then(user => {
        console.log(user)
        window.location.assign('http://127.0.0.1:8000/accounts/edit-profile/')
    })
    .catch(err => console.log(err));
})

我访问了几乎所有的Resources，讨论通过fecth向django上传图像，但所有的Resources都使用表单，并抽象出我试图实现的特定过程

---

请帮助我如何准确地在django视图端获取该图像，以及为什么它在django端是空的，而在javascript端是有价值的。我一直在处理一个类似的问题，下面是我如何使它工作的

首先，您不应该使用JSON对象向服务器发送文件。所以这部分不起作用

body:JSON.stringify（数据元素）

有几种方法可以对图像进行编码以将其发送到服务器（比如将其编码到base64），但我发现最简单的方法就是使用对象

这是我的一段代码

let formData = new FormData()
formData.append('image', e.target.files[0])
formData.append('account', currentAccount.username)

fetch('/api/post/add', {
    method: 'POST',
    body: formData
}).then( response => response.json())
.then( response => {
    console.log(response)
})

您可以使用async/await代替Promissions，但您已经明白了这一点

重要提示： 使用FormData时的内容类型是

“content-type”：“multipart/form data”

，但是，您不应该在这个特定的请求中定义任何内容类型，因为它会弄乱它。让浏览器定义内容类型

后端Django部分

同样，我们没有处理JSON，因此您不能使用

data=json.load（request.body.decode（“utf-8”））

下面是它的外观：

def add_image(request):
    if request.user.is_authenticated:
        if request.method == 'POST':
            image = request.FILES.get("image")
            account = request.POST.get("account")

---

我想知道是否有人能看到这个问题。请帮忙。我真的想不出一个方法，我可以收到至少一个线索吗？更多的澄清在这里，想问一下，根据这个解决方案，我是否会做2个不同的数据发送权利？因为我在一个对象中有所有的文本数据，所以图像必须在单独的处理中（formdata），而不是在其他数据所在的对象中。原因是，实际上，当我查看我的流时，我并没有使用formdata（）来发送。我用vanilla js将每一部分都分解成一个对象…所以我可以做两个单独的请求：一个是我的对象包含其余的数据，另一个是formdata仅包含图像二进制文件？@当然，你绝对可以。尽管你为什么要这么做？您还可以将文本数据单独或与图像数据一起放入FormData（）对象中，就像我在示例中附加图像文件和帐户用户名字符串一样。但是如果你真的想做两个独立的请求，你可以。

def add_image(request):
    if request.user.is_authenticated:
        if request.method == 'POST':
            image = request.FILES.get("image")
            account = request.POST.get("account")