Cordova - 插入网页的数据库

Cordova - Insert to web page's database

我正在使用 Apache Cordova 为 Visual Studio 开发应用程序。这个应用程序的目的是使用 phone 拍照并将这张照片与其他一些用户输入数据一起上传到我们公司的网页,该网页使用 SQL-server 数据库来存储它的数据。

所以,问题是:考虑到该应用程序将在我们的网络之外使用,我如何才能将数据插入该数据库以便我可以在网页上显示它?所以它不可能是我们数据库的本地连接!

您需要设置一个可以访问该数据库的安全 API。然后,您可以从 Cordova 应用程序创建一个 http POST 到将图像保存在数据库中的端点。您可以使用 base64 编码来促进图像数据的传输。然后,您就可以像往常一样从数据库中读取图像了!

您需要在 Cordova 方面做的所有事情就是将带有图像数据的 http 请求发送到 API 服务器。您可以使用 vanilla JS ala XMLHttpRequest 或像这样的 Cordova 插件来做到这一点 https://github.com/wymsee/cordova-HTTP.

服务器端会稍微复杂一些,因为您需要创建一个 API 端点来将图像数据保存到您的 MS-SQL 服务器中。你应该看看这个高级解释:https://technet.microsoft.com/en-us/library/aa258693(v=sql.80).aspx。如果您喜欢的话,还有 Node.js 用于 MS-SQL 服务器的接口。

var pictureSource;
 var destinationType;
document.addEventListener("deviceready", onDeviceReady, false);

设备就绪

function onDeviceReady() {
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
}

清理

function clearCache() {
    navigator.camera.cleanup();
}

var retries = 0;

上传相机拍摄的照片

function onCapturePhoto(fileURI) {
document.getElementById('MyElement').innerHTML = 'Uploading....';
    var win = function (r) {
    clearCache();
    retries = 0;
    document.getElementById('MyElement').innerHTML = '';
    alert('Image Uploaded! Successfully');
};

var fail = function (error) {
    if (retries === 0) {
        retries++;
        setTimeout(function () {
            document.getElementById('MyElement').innerHTML = '';
            onCapturePhoto(fileURI);
        }, 1000);
    } else {
        retries = 0;
        clearCache();
        document.getElementById('MyElement').innerHTML = '';
        alert('Something went wrong..Try Again');
    }
};
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
options.params = {};
var ft = new FileTransfer();
ft.upload(fileURI, encodeURI("http://yourserver.com/phpfile.php"), win, fail, options);
}

   function onFail(message) {
    alert(message);
    }

调用相机功能

拍照

   function capturePhoto() {
        navigator.camera.getPicture(onCapturePhoto, onFail, {
        quality: 100,
        destinationType: destinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        encodingType: Camera.EncodingType.JPEG
    });
    }

Php 部分

             <?php
             $sourcePath = $_FILES['file']['tmp_name'];
             $targetPath = "images/".$_FILES['file']['name']; // save uploaded image to images folder
             move_uploaded_file($sourcePath,$targetPath) ;
             ?>