如何使用带有 XMLHttpRequest 的 POST 将 JPEG 文件发送到服务器？答案

【问题标题】：How does one use POST with XMLHttpRequest to send JPEG file to server?如何使用带有 XMLHttpRequest 的 POST 将 JPEG 文件发送到服务器？
【发布时间】：2018-09-10 08:59:03
【问题描述】：

我有一个这样的 IMG 标签：

<img src="test.jpeg" className="Test" alt="Test" height="42" width="42">

但我必须通过 xmlHttpRequest 将 test.jpeg 发送到网站，该怎么做使用 XmlHttpRequest()。 related question is here，但它使用 GET 来填充 DOM。问题是使用带有 XMLHttpRequest 的 POST 来发送“test.jpeg”文件。

【问题讨论】：

标签： javascript post xmlhttprequest

【解决方案1】：

var formData = new FormData();

formData.append("inp", document.getElementById("inp").files[0]);

var request = new XMLHttpRequest();
request.open("POST", "http://yourdomain.com/submit.php");
request.send(formData);

您的 html 代码：

<input id="inp" type='file'>

【讨论】：

我在 react 中使用了类似的东西，但是它不起作用，因为 files[0] 对象被传递了一个空对象。换句话说，在 react 中，通过 getElementById() 传递的对象是 null，我使用的是 react，而不是 PHP，所以它有点不同。

【解决方案2】：

你可以发送你的图片 base64 编码

function readFile() {

  if (this.files && this.files[0]) {

    var FR= new FileReader();

    FR.addEventListener("load", function(e) {
      document.getElementById("b64").value     = e.target.result;
    }); 

    FR.readAsDataURL( this.files[0] );
  }

}

document.getElementById("inp").addEventListener("change", readFile);

图像编码将作为值添加到#b64隐藏输入中

<input id="inp" type='file'>
<input id="b64" type='hidden' name='b64'>

btw，可以触发readFile提交事件，一定要正确选择输入文件。

如果你的服务器是 PHP 使用这个函数来保存图像：

function save_image($base64_string, $image_location) {

    $ifp = fopen( $image_location, 'wb' ); 
    $data = explode( ',', $base64_string );
    fwrite( $ifp, base64_decode( $data[ 1 ] ) );
    fclose( $ifp ); 

    return $image_location; 
}

save_image($_POST['b64'], '/you/location');

【讨论】：

另一种解决方案可能如下：使用 toDataURL()，即将图像加载到画布上，然后使用 toDataURL 将其转换为数据，然后可以通过 XMLHttpRequest 作为原始数据发送数据？
你可以使用formData对象，我会添加一个答案。
仅供参考，有没有一种方法可以将 jpeg 图像编码为 XMLHttpRequest 格式代码，可以通过 XMLHttpRequest 轻松发送，可以使用 toDataURL() 将图像转换为数据，然后附加到文件，这是进行图像文件数据传输的正确方法吗？