上传文件角度

Upload file angular

本文关键字：文件      更新时间：2023-09-26

我有一个简单的形式

<div ng-controller='MyCtrl'>
 <form ng-submit='submit()'>
    <input name="name" value="name">
    <lf-ng-md-file-input lf-files='files'> </lf-ng-md-file-input>
    <button type='submit'> Submit
 </form>
</div>

我使用此 html 元素在客户端选择文件：https://github.com/shuyu/angular-material-fileinput。

如何访问我的上传文件以将其发送到服务器上？

我建议使用Ng-File-upload会做你可以做这样的事情的技巧，网站上有更多的文档以及不同例子的小提琴 

<body ng-app="fileUpload" ng-controller="MyCtrl">
 <h4>Upload on file select</h4>
  <button type="file" ngf-select="uploadFiles($file, $invalidFiles)"
      accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
  Select File</button>
  <br><br>
  File:
  <div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
  <span class="progress" ng-show="f.progress >= 0">
      <div style="width:{{f.progress}}%"  
           ng-bind="f.progress + '%'"></div>
  </span>
 </div>     
  {{errorMsg}}
</body>

控制器：

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.uploadFiles = function(file, errFiles) {
    $scope.f = file;
    $scope.errFile = errFiles && errFiles[0];
    if (file) {
        file.upload = Upload.upload({
            url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
            data: {file: file}
        });
        file.upload.then(function (response) {
            $timeout(function () {
                file.result = response.data;
            });
        }, function (response) {
            if (response.status > 0)
                $scope.errorMsg = response.status + ': ' + response.data;
        }, function (evt) {
            file.progress = Math.min(100, parseInt(100.0 * 
                                     evt.loaded / evt.total));
        });
    }   
  }
}]);

嗨~对不起，我没有清楚地说明lf-ng-md-file-input。

这个角度指令专注于使材料外观和基于ajax上传文件。

所以最重要的是你需要自己从"lf-files"数据绑定中获取文件，而不是输入元素，因为它每次解析文件后都会清除。

"lf-files"数据是一个数组变量，数组中的对象包含来自解析输入文件的lf文件名（文件名）、lfFile（文件对象）和lfDataUrl（用于预览）的属性。

您可以使用$watch观察"lf文件"。

.html：

<lf-ng-md-file-input lf-files='files' multiple> </lf-ng-md-file-input>

JavaScript ：

app.controller('MyCtrl',function($scope){
    $scope.$watch('files.length',function(newVal,oldVal){
        console.log($scope.files);
    });
});
因此，在

完成选择文件后，您需要调整如下数据以适应您的服务器端。

JavaScript ：

app.controller('MyCtrl',function($scope){
    ...
    $scope.onSubmit = function(){
        var formData = new FormData();
        angular.forEach($scope.files,function(obj){
            formData.append('files[]', obj.lfFile);
        });
        $http.post('./upload', formData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(function(result){
            // do sometingh                   
        },function(err){
            // do sometingh
        });
    };
    ...
});

就我而言，我在服务器端使用 node.js（ express + 强大），"强大"是用于解析表单数据的节点模块，还有其他类似的模块，如"Multer"。

服务器：

var express = require('express');
var formidable = require('formidable');
var app = express();
app.use(express.static(__dirname + '/public'));
...
app.post('/upload',function(req,res){
    var form = new formidable.IncomingForm();
    form.uploadDir = __dirname +'/public/uploads';
    //file upload path
    form.parse(req, function(err, fields, files) {
        //you can get fields here
    });
    form.on ('fileBegin', function(name, file){
        file.path = form.uploadDir + "/" + file.name;
        //modify file path
    });
    form.on ('end', function(){
        res.sendStatus(200);
        //when finish all process    
    });
});
...

我希望这会有所帮助.

相关文章：