客户端JS传递base64编码文件到服务端JS进行API调用

Question

这是我正在尝试构建的内容：

我有一个包含各种字段的表单，其中之一是图像上传。 我从这里获取了图像上传和 base64 编码部分，它运行良好。 这一切都发生在客户端：

    document.getElementById('button').addEventListener('click', function() {
      var files = document.getElementById('file').files;
      if (files.length > 0) {
        getBase64(files[0]);
      }
    });

    function getBase64(file) {
       var reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = function () {
       };
       reader.onerror = function (error) {
       };
    }

然后，我想采用 base64 编码的字符串并将其包含在 JSON 中以进行 api 调用。 api 调用需要在服务器端发生。 它还包括身份验证，仅此一点也可以正常工作。 该调用在所选位置创建一个文件。

我正在努力解决的问题：

如何将fileEncoded变量从脚本的客户端部分传递到服务器端？

我尝试了以下方法：

1. 将它作为查询字符串传递到单独的页面以进行 api 调用： <form action="apicall.html?fileEncoded" method="post">但我无法完成这项工作

2. 使用 localStorage，但这也不起作用： localStorage.setItem("fileEncoded", fileEncoded);

我想了解我在这里缺少什么，并且除了提供代码片段之外，我还希望能得到一个解释这个概念的答案。

我更愿意在两个单独的页面上进行（第一个使用表单和 base64 编码，第二个使用服务器端 api 调用）。

Answer 1

您可能需要通过POST请求向您的服务器发送请求，并将编码的文件数据作为该请求的正文。

然后在服务器端，您将不得不处理该POST请求。

例如：

function getBase64(file) {
  var reader = new FileReader();

  reader.readAsDataURL(file);

  reader.onload = function () {
    console.log(reader.result);
    var fileEncoded = reader.result;
    fetch("/upload/file", {
      method: "POST", 
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        data: fileEncoded,
        // Additional fields  here...
      })
    })
    .then(function(res) {
      console.log("Success!", res);
    })
    .catch(function(err) {
      console.log("Error!", err);
    });
  };

  reader.onerror = function (error) {
    console.log('Error: ', error);
  };
}

JS斌

Answer 2

在您的代码中，您使用readAsDataURL将文件转换为通常用于显示选定图像文件的数据 URL。 它根本不访问服务器。 您要做的是向服务器创建一个 AJAX 请求。

参见相关问题： 如何使用FormData进行ajax文件上传