Question

我有一个表单，用户可以输入数据，从相机中选择图像（使用cordova-plugin-camera插件）并提交表单。

我不知道如何将表单提交给服务器，因此它是POST请求的一部分。

HTML ：

<form name="recommendationForm" ng-submit="submitForm(recommendationForm.$valid)" novalidate>
  <div class="list">
    <label class="item item-input item-stacked-label">
      <span class="input-label">Recommendation</span>
      <textarea name="content" ng-model="formData.content" rows="10" required></textarea>
      <input type="hidden" name="user_id" ng-value="customer.User.id" />
      <input type="hidden" name="customer_id" ng-value="customer.Customer.id" />
      <p ng-show="recommendationForm.content.$invalid && !recommendationForm.content.$pristine" class="help-block">Please write something first ...</p>
    </label>

    <label class="item item-input item-stacked-label">
      <span class="input-label">Image</span><br>
      <img style="display:none" id="smallImage" src="" class="uploaded-image" ng-model="formData.image" />
      <button class="button button-calm" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Foto aus Bibliothek wählen</button>
    </label>
  </div>

  <button type="submit" class="button button-balanced" ng-disabled="recommendationForm.$invalid">Hinzufügen</button>
</form>

JS ：

// CAMERA HANDLING
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {

    var smallImage = document.getElementById('smallImage');
    smallImage.style.display = 'block';
    smallImage.src = "data:image/jpeg;base64," + imageData;
}

// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {

    var smallImage = document.getElementById('smallImage');
    smallImage.style.display = 'block';
    smallImage.src = imageURI;
}

// A button will call this function
//
function capturePhoto() {
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
}

// A button will call this function
//
function capturePhotoEdit() {
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });
}

// A button will call this function
//
function getPhoto(source) {
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
}

// Called if something bad happens.
//
function onFail(message) {
    setTimeout(function() {
        // do your thing here!
        alert('Failed because: ' + message);
    }, 0);
}

JS控制器：

  $scope.submitForm = function(isValid) {
    // check to make sure the form is completely valid

    if (isValid) {
      $http({
        method  : 'POST',
        url     : 'https://www.something.com/api/add.json',
        data    : $('form[name="recommendationForm"]').serialize(), 
        headers : { 'Content-Type': 'multipart/form-data' }  
      })
      .success(function(data) {
        if (data.success == false) {
          $scope.error = data.message;
          $scope.message = "";
        } else {
          $scope.message =  data.message;
          $scope.error = "";
        }
      });
    }
  }

我知道如何上传表单数据，我知道如何上传单个图片，但我目前无法将两者结合使用。如何将表单数据与图像一起上传？

Answer 1

您可以尝试使用cordova-plugin-filetransfer：

// !! Assumes variable fileURL contains a valid URL to a text file on the device,
//    for example, cdvfile://localhost/persistent/path/to/file.txt

var win = function (r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
}

var fail = function (error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
}

var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "text/plain";

var params = {};
params.value1 = "test";
params.value2 = "param";

options.params = params;

var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options);

请注意，要使用multipart / form-data上传模式，不应定义options.headers["Content-Type"]。

上传表单数据＆amp;使用Angular JS和Cordova的图像

1 个答案: