首页 > 解决方案 > 使用 Nativescript 和 PHP 上传图片

问题描述

我已经尝试了许多关于通过 Nativescript 上传图像的在线示例(这部分我似乎得到了正确的一两个问题),但是我的 PHP 服务器没有任何响应,我不知道如何访问该文件在上传数据中无处被上传到服务器是我所看到的文件名。我正在使用 background-http 插件,但通常有一些问题,即: - 我在使用 background-http 上传到服务器的图像中在哪里包含用户数据?- background-http 上的已完成处理程序没有收到来自我的服务器的响应,它仍然是空对象。- 在服务器端,我正在努力获取文件并且不知道如何接收用户数据。

我要问的是:有没有人有一个使用 Background-http 插件从 Nativescript Core 上传的工作示例(并与图像一起提交用户数据),通过 PHP 文件接收并处理它并提供响应? 对于我的生活,我无法让它工作。

我已经尝试了 tee 的 Background-http 插件示例,它显示它正在上传,但从不显示服务器响应,只显示 responseCode 为 200。

在服务器端,我尝试了很多我在网上找到的示例,但似乎没有一个有效 - 我怀疑这是因为它们主要是 Web 示例。我需要一些特定于 Nativescript 的东西。

原生脚本 JS 文件

exports.uploadImage = () => {
    // file path and url
    var file = cameraViewModel.imageAsset;
    var url = "https://www.wesignit.co.za/api/wsi_1/WSI_1_PROD/image_upload.php";
    var name = file.substr(file.lastIndexOf("/") + 1); //this gets the filename

    // upload configuration
    var bghttp = require("nativescript-background-http");
    var session = bghttp.session("image-upload");
    var request = {
            url: url,
            method: "POST",
            headers: {
                "Content-Type": "application/octet-stream"
            },
            description: "Uploading file: " + name
        };

    var task = session.uploadFile(file, request);

    task.on("progress", progressHandler);
    task.on("error", errorHandler);
    task.on("responded", respondedHandler);
    task.on("complete", completeHandler);

    // event arguments:
    // task: Task
    // currentBytes: number
    // totalBytes: number
    function progressHandler(e) {
        cameraViewModel.uploadOutputs = "Uploading file: " + name + " - uploaded " + e.currentBytes + " / " + e.totalBytes + "(" + (Math.round(e.currentBytes/e.totalBytes * 100) * 10 / 10) + "%)";
    }

    // event arguments:
    // task: Task
    // responseCode: number
    // error: java.lang.Exception (Android) / NSError (iOS)
    // response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
    function errorHandler(e) {
        cameraViewModel.uploadOutputs = "received " + e.responseCode + " code.";
        //cameraViewModel.uploadOutputs = "Error uploading file - try again!";
        //var serverResponse = e.response;
        //alert(e.response);
        alert("Error uploading file - try again!");
    }


    // event arguments:
    // task: Task
    // responseCode: number
    // data: string
    function respondedHandler(e) {
        cameraViewModel.uploadOutputs = "received " + e.responseCode + " code. Server sent: " + e.data;
    }

    // event arguments:
    // task: Task
    // responseCode: number
    // response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
    function completeHandler(e) {
        cameraViewModel.uploadOutputs = "received " + e.responseCode + " code";
        var serverResponse = e.response;
        alert(JSON.stringify(e));
    }


}

PHP上传文件

header('Content-Type: application/json; charset=utf-8');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
$response = array();
$upload_dir = 'uploads/';
$server_url = 'https://www.wesignit.co.za';
if($_FILES['avatar'])
{
    $avatar_name = $_FILES["file"]["name"];
    $avatar_tmp_name = $_FILES["file"]["tmp_name"];
    $error = $_FILES["file"]["error"];
    if($error > 0){
        $response = array(
            "status" => "error",
            "error" => true,
            "message" => "Error uploading the file!"
        );
    }else
    {
        $random_name = rand(1000,1000000)."-".$avatar_name;
        $upload_name = $upload_dir.strtolower($random_name);
        $upload_name = preg_replace('/\s+/', '-', $upload_name);

        if(move_uploaded_file($avatar_tmp_name , $upload_name)) {
            $response = array(
                "status" => "success",
                "error" => false,
                "message" => "File uploaded successfully",
                "url" => $server_url."/".$upload_name
              );
        }else
        {
            $response = array(
                "status" => "error",
                "error" => true,
                "message" => "Error uploading the file!"
            );
        }
    }

}else{
    $response = array(
        "status" => "error",
        "error" => true,
        "message" => "No file was sent!"
    );
}
echo json_encode($response);

我希望看到服务器响应,即使只是一个虚拟响应对象(我也尝试过),但只接收 responseStatus、responseCode 等......我希望填充的响应对象是空的。

在服务器上:很明显服务器没有接收文件并处理它。

请帮忙。我在这里挣扎。我只需要一个可以继续复制的工作示例。

标签: phpfile-uploadnativescriptimage-uploadnativescript-background-http

解决方案


推荐阅读