[英]Meteor: Http Call return Undefined on response after an Http Response
I try to upload a file by encoding the content as base64 using a meteor app and a custom php script. 我尝试通过使用流星应用程序和自定义php脚本将内容编码为base64来上传文件。
The php script is the following: 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]);
}
}
And on my meteor script I created a file named "imports/ui/File.jsx" having the following content: 在流星脚本上,我创建了一个名为“ 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;
And I also have a file named imports/api/FileUpload.js
that handles the http call to the server: 而且我还有一个名为
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);
});
}
});
The problem is even though I get I successfull response from my server the: 问题是,即使我从服务器成功获得以下响应:
console.log("Response:",response);
Does not print the returned json response from my server script to the console. 不将服务器脚本返回的json响应打印到控制台。 Instead I get the following message (in my browser console):
相反,我在浏览器控制台中收到以下消息:
Response: undefined
回应:未定义
I cannot uinderstand why I get undefined on response even though the php script returns a response. 我无法理解为什么即使php脚本返回了响应,我在响应时仍未定义。 Also if I
console.log
the err I get the following: 另外,如果我
console.log
错误,我得到以下信息:
Error Error: network Καταγραφή στοίβας: httpcall_client.js/HTTP.call/xhr.onreadystatechange@ http://localhost:3000/packages/http.js?hash=d7408e6ea3934d8d6dd9f1b49eab82ac9f6d8340:244:20
错误错误:网络Καταγραφήστοίβας:httpcall_client.js / HTTP.call / xhr.onreadystatechange @ http:// localhost:3000 / packages / http.js?hash = d7408e6ea3934d8d6dd9f1b49eab82ac9f6d8340:244:20
And I cannot figure out why does it happen. 我不知道为什么会这样。
The meteor App does 2 Http calls 1 using OPTIONS
method and one that uses POST
流星应用程序使用
OPTIONS
方法执行2个Http调用,使用POST
As requested when replaced the die()
with: 根据要求,将
die()
替换为:
var_dump($_SERVER['REQUEST_METHOD']); exit;
I get the response: 我得到答复:
/home/pcmagas/Kwdikas/php/apps/base64Upload/src/public/index.php:14:string 'OPTIONS' (length=7)/home/pcmagas/Kwdikas/php/apps/base64Upload/src/public/index.php:14:string'OPTIONS' (长度= 7)
Also on my network tab of the browser it says: 还在浏览器的“网络”标签上显示:
Please keep in mind that the meteor performs 2 http calls to the script one using http OPTIONS
method and one that uses the http POST
one. 请记住,流星对脚本执行2次http调用,一次使用http
OPTIONS
方法进行,另一次使用http POST
。 What I want to get is the one that uses the http POST
one. 我要获得的是使用http
POST
一种。
I also tried to put a timeout of 2 seconds by changing the http_obj
into: 我还尝试通过将
http_obj
更改为http_obj
来设置2秒钟的超时:
let http_obj={
'data':{
'data':base64Data,
'name':name,
'mime':mime
},
'timeout':2000
}
But I get the following error: 但是我收到以下错误:
Error Error: Can't set timers inside simulations
错误错误:无法在模拟中设置计时器
In the end I needed to make the method to run on server: 最后,我需要使该方法在服务器上运行:
I did it by changing the imports/api/FileUpload.js
into this: (I also removed unwanted code) 我通过将
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);
}
});
}
And putting this require into server/main.js
resulting into this: 并将此需求放入
server/main.js
结果如下:
import { Meteor } from 'meteor/meteor';
import {FileUpload} from '../imports/api/FileUpload.js';
Meteor.startup(() => {
// code to run on server at startup
});
Also on imports/ui/File.jsx
I call the method like that: 同样在
imports/ui/File.jsx
我这样调用方法:
Meteor.call('fileStorage.uploadFile',reader.result,file.name,file.type,function(err,response){
console.log(response);
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.