0

我正在尝试使用从客户端上传图像的Rocket构建一个 Rust Web 应用程序。

我的问题是我不知道如何在客户端将上传图像（像素）的数据编码为 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()但这也不起作用（客户端错误）。

4

1 回答 1

0

我想我已经设法解决了这个问题。我使用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);
}
于 2020-03-28T19:13:45.350 回答