如何使用离子上传图像，如表单数据答案

【问题标题】：How to upload image like a form-data with ionic如何使用离子上传图像，如表单数据
【发布时间】：2017-03-22 22:22:34
【问题描述】：

我的申请的某些部分需要帮助！我正在尝试使用 CordovaFileTransfer 和 Cordova Camera 使用 Http Post Request 上传头像图像。当我尝试这样做时，我的 ionic 应用程序代码 414 url 请求错误太长！我使用 Wordpress Rest Api Json User Plus 插件！

当我使用 Postman 发送文件时，它可以正常工作，但是当我尝试使用代码发送文件时出现错误！

我的按钮

    <button ng-click="uploadAvatar()"><i class="fa fa-camera"></i> Upload Avatar</button>

我的控制器

 $scope.uploadAvatar =  function() {
  var user = AuthService.getUser();
    var options = {
         quality : 75,
         destinationType : Camera.DestinationType.DATA_URL,
         sourceType : Camera.PictureSourceType.CAMERA,
         allowEdit : true,
         encodingType: Camera.EncodingType.JPEG,
         popoverOptions: CameraPopoverOptions,
         targetWidth: 500,
         targetHeight: 500,
         saveToPhotoAlbum: false
     };
     $cordovaCamera.getPicture(options)
     .then(function(imageData) {
        $http.post('http://hannation.me/api/userplus/avatar_upload?cookie=' + user.cookie + '&key=57f211a0354d7' + '&avatar=data:image/png;base64,' + imageData)
        
     }, function(error) {
         console.error(error);
     });
    }

我做错了什么？我认为我的代码是正确的，因为代码尝试将文件发送到服务器对吗？请帮我用这个小部件损失一周！

我用

改成这个

 $scope.uploadAvatar =  function() {
  var user = AuthService.getUser();
var options = {
     quality : 75,
     destinationType : Camera.DestinationType.DATA_URL,
     sourceType : Camera.PictureSourceType.CAMERA,
     allowEdit : true,
     encodingType: Camera.EncodingType.JPEG,
     popoverOptions: CameraPopoverOptions,
     targetWidth: 500,
     targetHeight: 500,
     saveToPhotoAlbum: false
 };
 $cordovaCamera.getPicture(options)
 .then(function(imageData) {
    var req = {
      method: 'POST',
      url: 'http://hannation.me/api/userplus/avatar_upload',
      data: 'cookie=' + user.cookie + '&key=57f211a0354d7' + '&avatar=data:image/png;base64' + imageData
    }
    $http(req).then(function(response){
         console.log(req);
      }, 
      function(error) {
         console.error(error);
      })
})
  }

但是钢不行！现在我有404错误！

First Image

Second Image

【问题讨论】：

您正在使用$http.post，但您在 url 中传递数据。要在 url 中传递数据，您必须使用 get
@DivyeshSavaliya 这都是错误的吗？让我试试
@DivyeshSavaliya 与 get 相同的错误！ 414 Request URL Too Long HTTP 错误 414. 请求 URL 太长。
你必须创建post api。让您的 api 支持发布请求
@DivyeshSavaliya 我用 POSTMAN 用 POST 方法发送它可以工作！ APi 是有效的，但我的代码不起作用！

标签： angularjs cordova file-upload ionic-framework

【解决方案1】：

这是因为您与post 和get 不匹配，您正在编写$http.post 但您在url 中传递数据。

var req = {
    method: 'POST',
    url: 'http://hannation.me/api/userplus/avatar_upload',
    data: cookie=' + user.cookie + '&key=57f211a0354d7' + '&avatar=data:image/png;base64,' + imageData
}

$http(req).then(function(response){
     console.log(response);
}, function(error){
     console.log(error);
});

检查 docs 的 angularjs http

【讨论】：

找不到我的404！
可以上传POSTMAN截图吗