Question

你好我正在创建视频上传表单的平均应用程序。当我用角度js向我的api发布请求时，我在一个地方敲了一下然后我的控制器没有数据。我在哪里做错了？

function addCtrl($scope, $filter, editableOptions,$http, editableThemes,$window,$uibModal, baProgressModal) {
      $scope.fileChanged = function(elem){
        $scope.files = elem.files;
        $scope.$apply();
      }
  $scope.uploadComplete = function(f){

  $http({
    method: 'POST',
    format: 'json',
    url: '/api/add-video',
    headers: {
                'Content-Type': 'multipart/form-data'
            },
    data: JSON.stringify({
      title: f.title,
      description: f.description,
      duration: f.duration,
      author:f.author,

      file:$scope.files,
      ispublic:parseInt(f.public)
    }),
    transformRequest: function (data, headersGetter) {
                var formData = new FormData();
                angular.forEach(data, function (value, key) {
                    formData.append(key, value);
                });

                var headers = headersGetter();
                delete headers['Content-Type'];

                return formData;
            }

  })
  .then(function(success) {
    console.log("hit " + JSON.stringify(success));
    // $window.location.reload()
  }, function(error) {
    //console.log("not hit " + JSON.stringify(error));
  });

   }
  console.log($scope.files[0].name);
  console.log(parseInt(f.public));
  }

  }
  })();

我的角度控制器是

app.post('/api/add-video', addVideoHandler);
function addVideoHandler(req, res) {

  var data = {
    title: req.body.title,
    description: req.body.description,
    author: req.body.author,
    duration: req.body.duration,
    file: req.body.file,
    ispublic: req.body.ispublic
  }
console.log(data);

}

和我的api / url是服务器端的一部分

 { title: undefined,
  description: undefined,
  author: undefined,
  duration: undefined,
  file: undefined,
  ispublic: undefined }

我已经在上面的url文件中使用了所有节点包，我没有提到。为什么我没有在控制台中获取所有数据，它显示：

this

我在哪里做错了？请指导我.Thankyou

Answer 1

尝试使用如下指令

.directive('fileModel', ['$parse', function($parse) {
        function fn_link(scope, element, attrs) {
            var onChange = $parse(attrs.fileModel);
            element.on('change', function (event) {
                onChange(scope, { $files: event.target.files });
            });
        };
        return {
            link: fn_link
        }
    }])

然后将input type = file替换为

<input type="file" class="form-control" id="fileId" accept="image/*" file-model="myFiles($files)"/>

然后在您的控制器中添加此

var formData = new FormData();
        $scope.myFiles = function($files) {
            formData.append('img', $files[0]);
}

替换＆＃39; img＆＃39;到后端需要的名称 使用formData中的键添加每个值以发送 如

formData.append('title', form.title);
formData.append('description', form.description);
formData.append('author', form.author);
formData.append('duration', form.duration);
formData.append('public', form.public);

和你的$ http方法

  $http({
    method: 'POST',
    url: '/api/add-video',
    headers: {
                'Content-Type': undefined
            },
    data: **formData**),

节点侧 然后使用multer diskStorage将文件上传到服务器

var uploadMulter = multer.diskStorage({
     destination: function(req, file, callback) {
         callback(null, "./UploadDir");
     },
     filename: function(req, file, callback) {
         callback(null,  Date.now() + path.extname(file.originalname));
     }
 });

var upload = multer({ storage: uploadMulter });

./ UploadDir 是您要上传文件的目标文件夹

最后是你的路由器

app.post('/api/add-video',  upload.single('img'), addVideoHandler);

现在，如果您要上传单个文件，请使用 upload.single（＆＃39; img＆＃39;） **或多次使用** upload.array（＆＃39; img＆＃39;，3）此处将上传3个文件。根据需要改变。

这是我在StackOverflow上的第一个答案： - ）

如果无法访问目的地目录UploadDir，请尝试通过

加入

app.use('/UploadDir', express.static(path.join(__dirname, 'UploadDir')))

尝试使用此$ http方法，如果该方法不起作用

$http.post('/api/add-video',formData,{headers:{'Content-Type': undefined}})

将控制器更改为

.controller('addCtrl', function($scope,$http){
var formData = new FormData();
 $scope.myFiles = function($files) {
  formData.append('img', $files[0]);
  }
$scope.uploadComplete= function(form){
  formData.append('title', form.title);
  formData.append('description', form.description);
  formData.append('author', form.author);
  formData.append('duration', form.duration);
  formData.append('public', form.public);
  $http.post('/api/add-video',formData,{headers:{'Content-Type': undefined}}).then(function(res){
    alert("Correctly Done")
   }, function(err){
   alert("Error check console in browser");
    console.log(err)
    })
  }
})

如何将angularjs中的文件和表单数据发送到node.js服务器？

1 个答案: