Django ReactJS：将数组从 JavaScript 前端传递到 Django Python 后端

Question

我用 Django 和 React JS 制作了一个网站。我正在尝试将一个数组pict从 JavaScript 前端传递到 Django（Python 后端）。

let pict = [];

pictureEl.addEventListener(`click`, function () {
  console.log(`Take Pic`);
  pict += webcam.snap();
  console.log(pict);
});

pict是相机拍摄的图像数组。我如何将其传递到后端？

Answer 1

您可以使用 HTTP 请求库（例如 axios、fetch、ajax 请求等）与后端通信

HTTP 上的通信是通过几个不同的动词（即 GET、POST、PUT、PATCH、DELETE 等）完成的，我不知道您的端点如何处理请求，因此我假设您的端点需要一个POST. 笔记：

• 下面的例子使用axios作为JS的HTTP请求库
• 我建议更改您的原始代码以使用图片

# urls.py
from django.urls import path

from . import views

url_patterns = [
  path('path/to/my_endpoint', views.my_endpoint),
]

# views.py
from django.http import HttpResponse

def my_endpoint(request):
    pict = request.POST.getlist('pict[]')
    process_pict(pict)
    return HttpResponse('Success')

在这种情况下，您可以将请求发送到您的服务器，如下所示：

// api.js
import axios from 'axios'

export function sendPict(pict) {
  const payload = {'pict[]': pict}
  return axios.post('path/to/my_endpoint', payload)
}

然后你可以从你的应用程序发送你的图片到任何地方：

import sendPict from './api'
const pict = [];
pictureEl.addEventListener(`click`, function () {
  console.log(`Take Pic`);
  pict.push(webcam.snap());
  console.log(pict);
  console.log('sending pict to server')
  sendPict(pict)
    .then(response => console.log(`The success server response is: ${response}`))
    .catch(error => alert(`Oh noes: ${error}`))
});