【问题标题】:POST http://localhost:8082/public/fileUpload 404 (Not Found) when file upload button is clicked单击文件上传按钮时发布 http://localhost:8082/public/fileUpload 404(未找到)
【发布时间】:2017-08-08 22:31:57
【问题描述】:

您好,我想将图像上传到我的本地路径。

我正在使用 angularjs 我正在尝试将图像上传到我的本地路径,但我无法将图像存储在我的本地路径中。

当我点击上传按钮时,我得到了

POST http://localhost:8082/public/fileUpload 404 (Not Found)

但我已在本地文件夹中添加了 fileUpload 文件夹。

这里显示文件上传未找到。

下面我添加了我的代码,任何人都可以查看我的代码。

<html>

   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>

   <body ng-app = "myApp">

    <div ng-controller = "myCtrl">
    <input type="file" file-model="myFile"/>
    <button ng-click="uploadFile()">upload me</button>
</div>

      <script>  
      var myApp = angular.module('myApp', []);

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
        })
        .error(function(){
        });
    }
}]);

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

    $scope.uploadFile = function(){
        var file = $scope.myFile;
        console.log('file is ' );
        console.dir(file);
        var uploadUrl = "/public/fileUpload";
        fileUpload.uploadFileToUrl(file, uploadUrl);
    };

}]);

      </script>

   </body>
</html>

【问题讨论】:

  • 当您在浏览器中手动复制粘贴网址时? localhost:8082/public/fileUpload
  • 嗨 JP Hellemons:我将我的项目托管到我的本地主机中。
  • 但是当您手动转到网址时它会给出 404 吗?因为似乎没有什么可以处理发布的文件并将其存储到磁盘。
  • 嗨 JP Hellenmons:如果我直接运行页面“XMLHttpRequest 无法加载文件:///C:/public/fileUpload。跨源请求仅支持协议方案:http、data、chrome、chrome -extension、https、chrome-extension-resource。”我收到了这个错误。
  • 添加你使用cors包吗? npmjs.com/package/cors

标签: angularjs node.js mean-stack


【解决方案1】:

在侦听 localhost 上的端口 8082 的应用程序中,您没有 POST /public/fileUpload 的路由处理程序。

您可能有一个用于 GET 等其他方法的路由处理程序,当您在浏览器中输入 URL 时它可能会给您一个响应,但要使其正常工作,您需要一个 POST 处理程序。

查看您的后端代码并搜索/public/fileUpload 路由处理程序。确保正确处理 POST。

使用curl -v -X POST http://localhost:8082/public/fileUpload 确保您获得为 POST 处理的路由。

【讨论】:

  • 您好 rsp:我没有在我的页面中使用路由处理程序。
  • @Vinoth 那么你为什么期望它被处理呢?您需要在您的应用程序中使用一个路由处理程序来侦听端口 8082。
  • 嗨 rsp:如何在此添加路由处理程序?你能告诉我吗
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-12-04
  • 2021-05-11
  • 2021-09-14
  • 1970-01-01
  • 2016-08-06
  • 2019-07-13
相关资源
最近更新 更多