解決了 Django 文件上傳與 ajax 沒有 JQuery

Question

一切都在標題中，所以在進一步解釋之前有我的代碼。

{% extends 'informations/userpage.html' %}
{% load static %}
{% block redaction %}
<div class="redaction">
    <form method="POST" enctype="multipart/form-data" action="/redaction/" class="article-post">
        {% csrf_token %}
        <div class="article-picture">
            {% if article.image %}
                {{article.image}}
            {% else %}
                <img class="generic-image" src="{% static 'informations/images/none-picture.svg' %}" alt="Image article">
            {% endif %}
                <img class="edit" id="article-image" src="{% static 'informations/images/edit.svg' %}">
        </div>
        <div id="id01" class="modal" style="display: none;">
            <div class="upload-container">
                <input type='file' name="newImage">
                <div class="button" id="uploadImage" name="upload" value="envoyer">Envoyer</div>
            </div>
        </div>
    </form>
    {% csrf_token %}
    <script id="picturesend">
        var csrf_token = document.getElementsByName('csrfmiddlewaretoken').value
    </script>
    <script type="text/javascript"
            id="django-admin-popup-response-constants"
            src="{% static 'informations/redaction.js' %}">
    </script>
</div>
{% endblock %}

var articleImage = document.getElementById('article-image');
var uploadImage = document.getElementById('uploadPic');

uploadImage.addEventListener('click', displayUpload);
articleImage.addEventListener('click', displayUpload);

function displayUpload() {
    var uploadfile = document.getElementById('id01');
    var uploadPicture = document.getElementById('uploadImage');
    uploadPicture.addEventListener('click', uploadFile);
    uploadfile.style.display='block'
}

function uploadFile() {
    var formData = new FormData();
    var file = document.getElementsByName('newImage');
    var image = document.getElementsByClassName('generic-image')[0];
    formData.append('newImage', file);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload/', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
            image.setAttribute('src',JSON.parse(xhr.responseText));
        } else {
            alert('An error occurred!');
        }
    };
    xhr.setRequestHeader('Content-Type', file.type);
    xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
    xhr.send(formData);
}

我的文件 model

def userDirectoryPath(instance, filename):
    # file will be uploaded to MEDIA_ROOT/user_<id>/<filename>
    return 'user_{0}/{1}'.format(instance.user.username, filename)

class Media(models.Model):
    user = models.ForeignKey(User, null=True , on_delete=models.CASCADE)
    media = models.FileField(upload_to=userDirectoryPath)

我的觀點處理 ajax。

@login_required
def upload_media(request):
    user = request.user
    data = {}

    if request.POST:
        newFile = Media()
        newFile.media = request.FILES['newImage']
        newFile.user = user
        newFile.save()
        data.update({"media_url": newFile.media.url})

    return JsonResponse(data)

所以現在有點解釋，我想做的是沒有 JQuery，將文件發送到我的服務器，注冊文件並在數據庫中添加一個條目，然后返回 url 和 JsonResponse 做我需要做的任何事情， javascript。

我是所有這些技術的初學者，我故意不使用 Jquery。 我知道我的代碼編寫並沒有真正遵循最佳實踐，但我希望它是可以理解的。

我發送的代碼的問題是，當我查看我的console.log(xhr.responseText); 我看到 {}，所以它似乎不明白請求方法是 POST 方法，我嘗試了if request.method == 'POST':我得到了相同的結果。 由於我並不真正了解 ajax 的所有信息，因此我認為問題出在我的 javascript 代碼中。 我在 Internet 上進行了一些搜索，但我得到的只是 JQuery 的示例，我不使用它。

因此，如果有人看到任何解決方案，或者知道我可以在哪里獲得解決方案，我將非常感激，當然如果您需要更多詳細信息，我會提供您的需求。

感謝您的閱讀，並最終幫助了我。

[更新]

使用request.method == "POST"條件為真，但如果我MultiValueDictKeyError at /upload/ newImage我在使用<form>並忘記enctype="multipart/form-data"時已經遇到此錯誤，則錯誤發生在內部enctype="multipart/form-data" ，現在我被困住了。

Answer 1

[已解決]經過一番搜索、閱讀我的代碼和一些嘗試后，我發現我的代碼中有一些錯誤。 這是有效的代碼：

function uploadFile() {
    var formData = new FormData();
    var file = document.getElementsByName('newImage')[0];
    var image = document.getElementsByClassName('generic-image')[0];
    formData.append('newImage', file.files[0], file.files[0].name);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", '/upload/', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
            image.setAttribute('src',JSON.parse(xhr.responseText));
        } else {
            alert('An error occurred!');
        }
    };
    xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
    xhr.send(formData);
}

不需要行javascript xhr.setRequestHeader('Content-Type', file.type); 並獲取您需要使用輸入的屬性文件的文件

var file = document.getElementsByName('newImage')[0];
 formData.append('newImage', file.files[0], file.files[0].name);

files[0] 因為我當時只上傳一個文件。 我希望我的錯誤能幫助別人。

再見，問題解決了，至少對於文件上傳！