由于 Django 或 Apache，我有两个错误

Question

When I try to send a POST request to http://localhost/upload-avatar/ I got two errors

Error 404 (Not Found)

SyntaxError: Unexpected token '<', "<.DOCTYPE "... is not valid JSON.

I would like to understand what is the reason and how to fix this problem. There are suspisions that the problem is in Apache. I am using wamp. I connected Django after some time of using and writing wamp code. I configured Apache. I also checked the routing settings and the server startup, but the problem remains. I ask for help in identifying and eliminating this problem. Thank you in advance!

Code:

JS:

    PhotoUpload.addEventListener('change', function() {
      const file = this.files[0];
      if (file) {
        const reader = new FileReader();
        reader.addEventListener('load', function() {
          photo.setAttribute('src', this.result);
          photo.classList.remove('alt-centered');
          PhotoUpload.style.display = 'none'; 
  

          const formData = new FormData();
          formData.append('photo', file);
  
          fetch('/upload-avatar/', {
            method: 'POST',
            body: formData
          })
          .then(response => response.json())
          .then(data => {
            console.log(data);
          })
          .catch(error => {
            console.error('Error:', error);
          });
        });
  
        reader.readAsDataURL(file);
      } else {
        photo.setAttribute('src', '#');
        photo.classList.add('alt-centered');
        PhotoUpload.style.display = 'block';
      }
    });
  };

views.py

from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
from django.core.files.storage import default_storage
from django.http import JsonResponse

@csrf_exempt
def upload_avatar(request):
    if request.method == 'POST' and request.FILES.get('photo'):
        photo = request.FILES['photo']
        # Сохраните фотографию с помощью default_storage
        filename = default_storage.save('photos/' + photo.name, photo)
        return JsonResponse({'message': f'Photo uploaded successfully: {filename}'})
    return JsonResponse({'error': 'An error occurred while uploading the photo.'})

urls.py

from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
from PhotoSave import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('upload-avatar/', views.upload_avatar, name='upload_avatar'),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

In the Apache file (httpd.conf) I only changed

<Directory "${SRVROOT}/cgi-bin">
    AllowOverride None
    Options None
    Require all granted
</Directory>

<Directory "${INSTALL_DIR}/www/Chat/MediaSave">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

and also added the line LoadModule wsgi_module modules/mod_wsgi.so

Answer 1

You are getting a Django error page from the view. My advice is, catch the error and send the exception message to the client. In the case of a GET view I would advice you to call it by hand in the browser, but I understand it's difficult to call a POST view by hand (you should write a form that calls this view).

@csrf_exempt
def upload_avatar(request):
    if request.method == 'POST' and request.FILES.get('photo'):
        try:
            photo = request.FILES['photo']
            # Сохраните фотографию с помощью default_storage
            filename = default_storage.save('photos/' + photo.name, photo)
            return JsonResponse({'message': f'Photo uploaded successfully: {filename}'})
        except Exception as ex:
            return JsonResponse({'exception': str(ex)})

    return JsonResponse({'error': 'An error occurred while uploading the photo.'})