将文件发送到Angular的REST服务时，收到null值，如何正确发送它？

14 浏览
0 Comments

将文件发送到Angular的REST服务时，收到null值，如何正确发送它？

这是我的HTML表单：\n

\n我想要从本地机器上传一张图片，并想要读取上传文件的内容。我想要使用AngularJS来实现这一切。\n当我尝试打印$scope.file的值时，它显示为undefined。

0

3 答案

0 Comments

问题的原因是在将文件发送到rest服务时，无法正确地获取到null值。解决方法是对代码进行如下修改：

1. 修改app.directive函数：

app.directive('myDirective', function (httpPostFactory) {
       return {
           restrict: 'A',
           scope: true,
           link: function (scope, element, attr) {
               element.bind('change', function () {
                   var formData = new FormData();
                   formData.append('file', element[0].files[0]);
                   httpPostFactory('upload_image.php', formData, function (callback) {
                      // recieve image name to use in a ng-src 
                       console.log(callback);
                   });
               });
           }
       };
   });

2. 修改app.factory函数：

app.factory('httpPostFactory', function ($http) {
       return function (file, data, callback) {
           $http({
               url: file,
               method: "POST",
               data: data,
               headers: {'Content-Type': undefined}
           }).then(function (response) {
               callback(response.data);
           });
       };
   });

3. 修改HTML代码：

<input data-my-Directive type="file" name="file">

4. 修改PHP代码：

if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {
   // uploads image in the folder images
       $temp = explode(".", $_FILES["file"]["name"]);
       $newfilename = substr(md5(time()), 0, 10) . '.' . end($temp);
       move_uploaded_file($_FILES['file']['tmp_name'], 'images/' . $newfilename);
   // give callback to your angular code with the image src name
       echo json_encode($newfilename);
   }

通过以上修改，可以正确地将文件发送到rest服务，并获取到正确的响应结果。

0
0 Comments

问题的原因是在使用Angular发送文件到REST服务时，没有正确地发送文件。解决方法是使用HTML5 API中的FileReader来读取文件内容，并将其发送到服务器。

首先，在HTML中可以使用以下代码来创建文件输入框和一个按钮来触发发送操作：

然后，在控制器中定义一个add方法，该方法会在按钮被点击时触发：

$scope.add = function() {
    var f = document.getElementById('file').files[0],
        r = new FileReader();
    r.onloadend = function(e) {
      var data = e.target.result;
      //通过$http或$resource发送二进制数据，或者对数据进行其他处理
    }
    r.readAsBinaryString(f);
}

值得注意的是，readAsBinaryString()方法已经被废弃，应该使用readAsArrayBuffer()方法来代替。

FileReader是HTML5标准中的一个类，可以从html输入元素中指定的文件中读取数据，并在onloadend回调函数中处理。使用这个API不需要任何库，因为它已经内置在浏览器中（除非使用非常旧的浏览器）。

此外，还有一些关于浏览器兼容性的信息，不同浏览器对于这个API的支持程度略有不同。

最后，还有一些其他的问题和建议，比如不要在控制器中访问DOM，应该使用指令来处理这些操作，以及如何将二进制数据解码成图像文件并在PHP中保存等。

总结起来，要正确地发送文件到REST服务，可以使用HTML5的FileReader API来读取文件内容，并使用Angular的$http或$resource来发送二进制数据。

0
0 Comments

问题的原因是在使用Angular发送文件到REST服务时，可能会得到null的返回值。这通常是因为在Internet Explorer 9及以下版本中，浏览器对象FormData()不可用。为了解决这个问题，需要使用备用策略，如使用<iframe>或Flash。

解决方法是使用一些专门用于文件上传的Angular.js模块。以下两个模块支持较旧的浏览器：

- [https://github.com/leon/angular-upload](https://github.com/leon/angular-upload) - 使用<iframe>作为备用

- [https://github.com/danialfarid/angular-file-upload](https://github.com/danialfarid/ng-file-upload) - 使用FileAPI/Flash作为备用

还有一些其他选项：

- [https://github.com/nervgh/angular-file-upload/](https://github.com/nervgh/angular-file-upload/)

- [https://github.com/uor/angular-file](https://github.com/uor/angular-file)

- [https://github.com/twilson63/ngUpload](https://github.com/twilson63/ngUpload)

- [https://github.com/uploadcare/angular-uploadcare](https://github.com/uploadcare/angular-uploadcare)

其中一个模块应该适合你的项目，或者可以给你一些编码的见解。除此之外，还可以考虑使用IaaS（基础设施即服务）来进行文件上传，可以参考[https://github.com/uploadcare/angular-uploadcare](https://github.com/uploadcare/angular-uploadcare)。

另外，可以在EggHead上观看关于这个问题的视频教程：[https://egghead.io/lessons/angularjs-file-uploads](https://egghead.io/lessons/angularjs-file-uploads)。

需要注意的是，danialfarid/angular-file-upload已经更名为ng-file-upload。

最后，如果你有自己的解决方案，也可以在[https://github.com/vikibaarathi/Angular-PHP-Imgur-Upload](https://github.com/vikibaarathi/Angular-PHP-Imgur-Upload)上分享。

0