Question

我们有一个本地系统，我想制作一个页面来从中提取图像（'http://localhost/system_analysis.png'）并发送到php脚本。

我有使用FileReader类的以下代码：

function fileAsDataURL(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     return (reader.result;
   };
   reader.onerror = function (error) {
     return 0;
   };
}

var xhr = new XMLHttpRequest();
xhr.open("POST", MY_API, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    value: fileAsDataURL('http://localhost/system_analysis.png')
}));

我尝试过，但是无法正常工作

Answer 1

好的，您只需分两步进行思考：

将图像转换为base64字符串。
将其发送到PHP API，该API将处理请求并将字符串转换回普通图像文件。

1。将在本地服务器上运行的文件：

A。将图像转换为base64字符串：

function fileAsDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    if (this.status == 200){
      var reader = new FileReader();
      reader.onloadend = function() {
        callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    } else callback(0);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

B。将base64字符串发布到您的API的函数：

function sendImg(name, value) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", 'http://YOUR_API_SERVER_HERE', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify({
      name: name,
      value: value
  }))
}

C。调用函数fileAsDataURL并将结果传递给函数sendImg：

fileAsDataURL('http://localhost/system_analysis.png', function(dataUrl) {
  sendImg('system_analysis.png', dataUrl);
});

2。 API文件：

$entityBody = file_get_contents('php://input');
$entityBody = json_decode($entityBody);

$data = explode(',', $entityBody->value);
file_put_contents('PATH_TO_SAVE_IMAGE/'.$entityBody->name, base64_decode($data[1]));

如何使用javascript发送本地图像并在PHP中接收它

1 个答案: