Angularjs 如何使用Ionic Framework将$http中的图像文件发送到服务器

我使用的是

cordova插件相机

。在这里，我需要创建一个图像并将其与一些属性值一起发布到服务器。我得到了图像和图像的URI，所以我可以获取图像，现在我面临的问题，发送到服务器。如何使用$http发送

HTML

---

传递imageData而不是url

var dataSend = new FormData();
dataSend.append('ImageData', $scope.imageData);
dataSend.append('ID', $scope.ID);

var Send = { 
             method: 'POST',
             url : baseURL+"/send_pic",
             headers: {'Content-Type': undefined},
             data: dataSend,
             timeout:30000
        };
$http(Send)
     .success(function(data) { 
           //success  
     })
     .error(function() { 
           //error 
     });

更新：

$cordovaCamera.getPicture(options).then(function (imageData) {
  $scope.imageDate = imageDate;
  $scope.imgURI = "data:image/jpeg;base64," + imageData;
  }, function (err) {
  // An error occured. Show a message to the user
});

---

传递imageData而不是url

var dataSend = new FormData();
dataSend.append('ImageData', $scope.imageData);
dataSend.append('ID', $scope.ID);

var Send = { 
             method: 'POST',
             url : baseURL+"/send_pic",
             headers: {'Content-Type': undefined},
             data: dataSend,
             timeout:30000
        };
$http(Send)
     .success(function(data) { 
           //success  
     })
     .error(function() { 
           //error 
     });

更新：

$cordovaCamera.getPicture(options).then(function (imageData) {
  $scope.imageDate = imageDate;
  $scope.imgURI = "data:image/jpeg;base64," + imageData;
  }, function (err) {
  // An error occured. Show a message to the user
});

---

我认为最好的办法是：

var formDataMultipart = new FormData();
var file = $element.find('#file')[0].files[0]; //or $('#file').files[0]
formDataMultipart.append('userFile', file);
formDataMultipart.append('token', cookie); //If needed

$http.post('/api/upload', formDataMultipart, {
                withCredentials: false,
                headers: {
                    'Content-Type': undefined
                },
                transformRequest: angular.identity,
                params: {
                formDataMultipart
            },
            responseType: 'json'
        })
            .then(.....)

---

在服务器端，您可以通过“userFile”和除“token”或任何附加参数以外的所有注入值来绘制文件，我认为最好的方法是：

var formDataMultipart = new FormData();
var file = $element.find('#file')[0].files[0]; //or $('#file').files[0]
formDataMultipart.append('userFile', file);
formDataMultipart.append('token', cookie); //If needed

$http.post('/api/upload', formDataMultipart, {
                withCredentials: false,
                headers: {
                    'Content-Type': undefined
                },
                transformRequest: angular.identity,
                params: {
                formDataMultipart
            },
            responseType: 'json'
        })
            .then(.....)

---

在服务器端，您可以通过“userFile”和除“token”或任何附加参数以外的所有注入值来绘制文件的图形

@dev one:dataSend提供空数组：FormData{}dateSend为空，因为$scope.ImageData中没有任何内容。请参阅对答案的更新@dev one:dataSend给出了空数组：FormData{}dateSend是空的，因为$scope.ImageData中没有任何内容。请参阅对答案的更新@Islam:formDataMultipart正在提供空数组：FormData{}@Khalid我猜您没有正确映射文件，或者您使用的是不支持FormData API的旧浏览器。要检查兼容性，请检查：@Khalid我认为您必须使用现代webview来获得此功能@Islam:formDataMultipart正在提供空数组：FormData{}@Khalid我猜您没有正确映射文件，或者您使用的是不支持FormData API的旧浏览器。要检查兼容性，请检查：@Khalid我认为您必须使用现代网络视图才能获得此功能