Question

我要将通过网络摄像头捕获的图像保存在媒体文件夹中在JS函数下方，HTML中的Snapshot会进行快照，并向本地服务器发出发布请求。

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作为ajax发布请求的一部分，REQUEST也没有名为“ imagedata”的属性。

我已经在settings.py中配置了媒体文件夹。（BASE>静态>媒体）

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

Answer 1

如果要从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上进行编码。使用分段上传时，您可以通过request.FILES属性在django视图中访问文件。您还需要更改客户端代码。看一下FormData网络api。

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

Answer 2

在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

通过POST请求将图像保存到Django Media Folder

2 个答案: