流星：Http 调用 return 未定义 Http 响应后的响应

Question

我尝试使用流星应用程序和自定义 php 脚本将内容编码为 base64 来上传文件。

php脚本如下：

require_once '../vendor/autoload.php';

use WindowsAzure\Common\ServicesBuilder;
use MicrosoftAzure\Storage\Common\ServiceException;
use MicrosoftAzure\Storage\Blob\Models\ListBlobsOptions;

error_log("Method:".$_SERVER['REQUEST_METHOD'],0);
if($_SERVER['REQUEST_METHOD'] === 'OPTIONS'){
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: POST');
  header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token , Authorization');
  error_log("Options Called",0);
  die();
} else {
  error_log("Post Called",0);

  function create_storage_connection()
  {
      return "DefaultEndpointsProtocol=https;AccountName=".getenv('AZURE_ACCOUNT').";AccountKey=".getenv('AZURE_KEY');
  }

  $connectionString=create_storage_connection();
  $blobRestProxy= ServicesBuilder::getInstance()->createBlobService($connectionString);
  $container_name=getenv('AZURE_CONTAINER');

  $data=file_get_contents('php://input');
  $data=json_decode($data,true);
  try{
    //Upload data
    $file_data=base64_decode($data['data']);
    $data['name']=uniqid().$data['name'];
    $blobRestProxy->createBlockBlob($container_name,$data['name'],$file_data);
    $blob = $blobRestProxy->getBlob($container_name, $data['name']);

    //Download url info
    $listBlobsOptions = new ListBlobsOptions();
    $listBlobsOptions->setPrefix($data['name']);
    $blob_list = $blobRestProxy->listBlobs($container_name, $listBlobsOptions);
    $blobs = $blob_list->getBlobs();

    $url=[];
    foreach($blobs as $blob)
    {
      $urls[]=$blob->getUrl();
    }
    error_log("Urls:\n".implode(" , ",$urls),0);
    header("Content-type: application/json");
    $result=json_encode(['files'=>"sent",'url'=>$urls]);
    error_log("Result: ".$result,0);
    echo $result;
  } catch(ServiceException $e) {
    $code = $e->getCode();
    $error_message = $e->getMessage();

    header("Content-type: application/json");
    echo json_encode(['code'=>$code,'message'=>$error_message]);

  }

}

在我的流星脚本中，我创建了一个名为 "imports/ui/File.jsx" 的文件，其中包含以下内容：

import React, { Component } from 'react';
import {FileUpload} from '../api/FileUpload.js';

class File extends Component {

  changeFile(e) {
    e.preventDefault()
    let files = document.getElementById('fileUpload');
    var file = files.files[0];

    var reader=new FileReader();

    reader.onloadend = function() {
      Meteor.call('fileStorage.uploadFile',reader.result,file.name,file.type)
    }

    reader.readAsDataURL(file);
  }

  render() {
    return (
      <form onSubmit={ this.changeFile.bind(this) }>
        <label>
          <input id="fileUpload" type="file" name="file" />
        </label>

        <button type="submit">UploadFile</button>
      </form>
    )
  }

}

export default File;

我还有一个名为 imports/api/FileUpload.js 的文件，用于处理对服务器的 http 调用：

import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http'

export default Meteor.methods({
  'fileStorage.uploadFile'(base64Data,name,mime) {
      // this.unblock();
      let http_obj={
        'data':{
          'data':base64Data,
          'name':name,
          'mime':mime
        },
      }

      HTTP.call("POST","http://localhost/base64Upload/",http_obj,function(err,response){
        console.log("Response:",response);
      });
  }
});

问题是即使我从我的服务器得到成功响应：

        console.log("Response:",response);

不打印从我的服务器脚本返回的 json 响应到控制台。相反，我收到以下消息（在我的浏览器控制台中）：

Response: undefined

我无法理解为什么即使 php 脚本 returns 响应，我的响应仍未定义。另外，如果我 console.log 错误，我会得到以下信息：

Error Error: network Καταγραφή στοίβας: httpcall_client.js/HTTP.call/xhr.onreadystatechange@http://localhost:3000/packages/http.js?hash=d7408e6ea3934d8d6dd9f1b49eab82ac9f6d8340:244:20

而且我不明白为什么会这样。

编辑 1：

流星应用程序进行了 2 次 Http 调用，1 次使用 OPTIONS 方法，1 次使用 POST

根据要求将 die() 替换为：

  var_dump($_SERVER['REQUEST_METHOD']); exit;

我收到回复：

/home/pcmagas/Kwdikas/php/apps/base64Upload/src/public/index.php:14:string 'OPTIONS' (length=7)

在我的浏览器网络选项卡上，它还显示：

请记住，流星对脚本执行了 2 次 http 调用，一次使用 http OPTIONS 方法，一次使用 http POST 方法。我想得到的是使用http POST的那个

编辑 2：

我还尝试通过将 http_obj 更改为：

来设置 2 秒的超时

let http_obj={
        'data':{
          'data':base64Data,
          'name':name,
          'mime':mime
        },
        'timeout':2000
      }

但是我收到以下错误：

Error Error: Can't set timers inside simulations

Answer 1

最后我需要在服务器上运行创建方法：

我通过将 imports/api/FileUpload.js 更改为：（我还删除了不需要的代码）

import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http'

export const UploadedFile=null;

if(Meteor.isServer){
  Meteor.methods({
    'fileStorage.uploadFile'(base64Data,name,mime) {
        // this.unblock();
        let http_obj={
          'data':{
            'data':base64Data,
            'name':name,
            'mime':mime
          },
          // 'timeout':2000,
          'headers':{
            'Content-Type': 'application/json'
          }
        }

        return HTTP.call("POST","http://localhost/base64Upload/",http_obj);
    }
  });
}

并将此要求放入 server/main.js 中，结果如下：

import { Meteor } from 'meteor/meteor';
import {FileUpload} from '../imports/api/FileUpload.js';

Meteor.startup(() => {
  // code to run on server at startup
});

同样在 imports/ui/File.jsx 我这样调用方法：

Meteor.call('fileStorage.uploadFile',reader.result,file.name,file.type,function(err,response){
        console.log(response);
      })
    }

流星：Http 调用 return 未定义 Http 响应后的响应

Meteor: Http Call return Undefined on response after an Http Response

javascript

php

meteor

meteor-react

编辑 1：

编辑 2：