Сохранение изображения в Django Media Folder через запрос POST

Question

Я хочу сохранить изображение, снятое с помощью веб-камеры, в папке мультимедиа Ниже функции JS Snapshot в html делает снимок и отправляет запрос на локальный сервер.

function snapshot() {
    // Draws current image from the video element into the canvas
    ctx.drawImage(video, 0,0, canvas.width, canvas.height);
    var Pic = document.getElementById("myCanvas").toDataURL("image/png");
    Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")

    // Sending the image data to Servers
    $.ajax({
    type: 'POST',
    url: 'addface',
    data: '{ "imageData" : "' + Pic + '" }',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (xhr, status, error) {
        alert("Done, Picture Uploaded.");
    },
   });
  }

VIEWS.PY

from __future__ import unicode_literals
from django.shortcuts import render
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
# Create your views here.


def index(request):
    return render(request, 'index.html')

@csrf_exempt
def add(request):
if request.method == "POST":
    print(request.imagedata)
    return HttpResponse(request.imagedata)
else:
    return HttpResponse('no data')

Ошибка: У ЗАПРОСА нет атрибута с именем «imagedata», хотя в запросе post есть imagedata как часть запроса post ajax.

Я настроил папку мультимедиа в settings.py. (БАЗА> Static> Media)

MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static','media')

Answer 1

В ajax изображение будет в base64, поэтому посмотрите на код ниже

if request.method == 'POST':
   image_data = request.POST.get('image') #get image data
   format, imgstr = image_data.split(';base64,')
   ext = format.split('/')[-1]
   data = ContentFile(base64.b64decode(imgstr)) #Image data
   myfile = "profile-"+time.strftime("%Y%m%d-%H%M%S")+"." + ext  #filename
   fs = FileSystemStorage()
   filename = fs.save(myfile, data)

Если проблема не устранена, пожалуйста, обратитесь https://simpleisbetterthancomplex.com/tutorial/2016/11/22/django-multiple-file-upload-using-ajax.html

Answer 2

Если вы хотите получить данные из полезной нагрузки json, вы должны прочитать request.body.

import json, base64

@csrf_exempt
def add(request):
    if request.method == "POST":
        payload = json.loads(request.body)
        image_data = base64.b64decode(payload['imagedata'])

Для файлов более распространено использование "multipart / form-data" вместо json. Тогда вам не нужно кодировать в и из base64. При многоэтапной загрузке вы можете получить доступ к файлам в представлении django из атрибута request.FILES. Вам также необходимо изменить код клиента. Взгляните на FormData веб-API для этого.

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects