Правильный способ отправки изображения через AJAX in JSON на сервер Rocket - PullRequest
Новая
       34

Правильный способ отправки изображения через AJAX in JSON на сервер Rocket

0 голосов
/ 27 марта 2020

Я пытаюсь создать Rust Web App, используя Rocket , который загружает изображения с клиента.

Моя проблема в том, что я не знаю, как кодировать данные загруженного изображение (пиксели) в JSON на стороне клиента. Эти данные будут позже отправлены через AJAX.

. Запрос POST здесь жалуется, что image это не String , а map . Это понятно, но я действительно хотел бы ПОСТАВИТЬ правильные данные на стороне Javascript (изображение на xhr.send()), потому что я считаю, что это та часть, которую мне не хватает. 

use rocket_contrib::json::{Json, JsonValue};

#[derive(Deserialize)]
pub struct Image {
    file_type: String,
    image: String,
    message: String,
}

#[post("/img_upload", data = "<image>")]
pub fn upload(image: Json<Image>) -> JsonValue {
    // here the back end should do some obscure matrix multiplications
    json!({
            "message": format!("Message {} received", image.0.message),
            "received_type": image.0.file_type,
            "image": image.0.image,
    })
}

Изображение загружается клиентом: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input type="file" name="fileb" id="fileb" />
  </body>
<script src="./main_moc.js">
</script>

И это main_moc.js. 

var target_brows = document.getElementById("fileb");

target_brows.addEventListener('change', loadDoc);

// POST REQUEST TO SERVER: upload image
function loadDoc(event) {
  var input = target_brows;
  var file = input.files[0];
  console.log(file);
  if (validFileType(file)) {

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/img_upload");
    xhr.onload = function(e) {

      if(xhr.status === 200) {
        console.log("Received stuff");
        var data = JSON.parse(xhr.responseText);
        console.log(data);
      } else {
        console.log("Some error:");
        console.log(xhr.responseText);
      }
    }

    xhr.send(JSON.stringify({
      "file_type": file.type,
      "image": file,
      "message": "Apples"
    }));

  }

}

Я также пытался записать изображение из файла на холст и отправка данных с использованием context.getImageData(), но это тоже не сработало (ошибка на стороне клиента).

1 Ответ

0 голосов
/ 28 марта 2020

Думаю, мне удалось решить проблему. Я использую File API для чтения ввода и затем отправляю его с помощью запроса POST.

Я все еще не уверен, что это лучший способ сделать это, но, по крайней мере, я могу справиться с этим на стороне сервера. 

function loadDoc(event) {
  // cancel default actions
  var file = target_brows.files[0];
  var fr = new FileReader();
  fr.onload = function () {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/img_upload");
    xhr.onload = function(e) {
      //The response of the upload
      xhr.responseText;
      if(xhr.status === 200) {
        console.log("Received stuff");
        var data = JSON.parse(xhr.responseText);
        console.log(data);
      } else {
        console.log("Some error:");
        console.log(xhr.responseText);
      }
    }

    xhr.send(JSON.stringify({
      "file_type": file.type,
      "image": fr.result,
      "message": "Apples"
    }));
  }
  fr.readAsDataURL(file);
}
...