标签: ng-file-upload

我有以下控制器方法一次上传多个文件,受此博客文章的启发以及这个问题的答案:

@RequestMapping(value = "/{user}/attachment", method = RequestMethod.POST)
@PreAuthorize(...)
public void upload(@PathVariable User user, 
                   @RequestParam("file") List<MultipartFile> files) {
  // handle files
}

但是,尽管请求包含文件列表,但文件列表始终为空.

如果我将第三个MultipartRequest参数添加到方法:

public void upload(@PathVariable User user, 
                   @RequestParam("file") List<MultipartFile> files,
                   MultipartRequest request)

我可以看到它正确包含我上传的文件:

什么可能是空的原因List<MultipartFile>？

我正在使用ng-file-upload提交文件,但我不认为它与问题有关.春季4.2.4.

我在角度2中使用ng2-file-upload.有没有办法通过文件上传操作提交表单数据？

我使用AngularJs创建了一个web应用程序,用户可以.txt使用ng-file-upload将文件上传到服务器.

现在我想要一个简单的Node.js服务器来测试上传部分并观察页面中的进度条和错误消息的行为,但是对于Node.js和整个后端的工作原理知之甚少,我试着使用所提供的Node.js服务器ng-file-upload的非常维基.

我尝试进行一些更改,将我带到这个app.js文件:

var http = require('http')
  , util = require('util')
  , multiparty = require('multiparty')
  , PORT = process.env.PORT || 27372

var server = http.createServer(function(req, res) {
  if (req.url === '/') {
    res.writeHead(200, {'content-type': 'text/html'});
    res.end(
      '<form action="/upload" enctype="multipart/form-data" method="post">'+
      '<input type="text" name="title"><br>'+
      '<input type="file" name="upload" multiple="multiple"><br>'+
      '<input type="submit" value="Upload">'+
      '</form>'
    );
  } else if (req.url === '/upload') {
    var form = new multiparty.Form();

    form.parse(req, function(err, fields, files) …

我一直在努力在服务器上上传图片.我在前端使用ngFileUpload.但我总是得到

"对预检请求的响应未通过访问控制检查:请求的资源上没有'Access-Control-Allow-Origin'标头"

Angular Code for file Upload:

 var uploadFile = function (file) {
      if (file) {

            if (!file.$error) {
              Upload.upload({
                  url: baseUrl+'upload',
                  file: file


              }).progress(function (evt) {
                  var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                  //console.log(evt.total);
              }).success(function (data, status, headers, config) {
                  $timeout(function() {

                    console.log(data);
                    console.log(status);
                      if(status==200)
                        {

                          logo_path = data.logo_path;

                        }

                  });
              });
            }

      }
  };

在Laravel上我已经像这样配置了CORS:

public function handle($request, Closure $next)
{
    header("Access-Control-Allow-Origin: http://localhost:8001/");

    // ALLOW OPTIONS METHOD
    $headers = [
        'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, …

所以我有一些功能正常的代码,但我需要添加多个图像上传到它.我用过这个插件.现在我的HTML看起来像这样:

<form class="form-horizontal full-width pull-left m-t-20" name="myForm" ng-if="showForm">
    <div class="form-group">
      <label for="Naam" class="col-sm-3 control-label">Naam</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" id="Naam" ng-model="addForm.name" placeholder="Naam">
      </div>
    </div>
    <div class="form-group">
      <div class="imageselect col-sm-3">
        Afbeeldingen
        <input type="file" ngf-select ng-model="files" ngf-multiple="true" accept="image/*" />
        Drop afbeeldingen: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
      </div>
      <div class="col-sm-9">
        <div ng-repeat="file in files" class="imagepreview">
          <img ng-show="myForm.file.$valid" ngf-thumbnail="file" class="thumb"><br /> <button ng-click="file = null" class="thumbremove" ng-show="file">Verwijder</button>
        </div>
      </div>
    </div>
    <div class="form-group">
      <span class="progress" ng-show="files.progress >= 0">
        <div style="width:<< files.progress >>%" ng-bind="files.progress + …

我正在使用Node来获取S3的presignedRUL以便将图像放入S3存储桶。

var aws = require('aws-sdk');
// Request presigned URL from S3
exports.S3presignedURL = function (req, res) {
  var s3 = new aws.S3();
  var params = {
    Bucket: process.env.S3_BUCKET, 
    Key: '123456', //TODO: creat unique S3 key
    //ACL:'public-read',
    ContentType: req.body['Content-Type'], //'image/jpg'
  };
  s3.getSignedUrl('putObject', params, function(err, url) {
      if(err) console.log(err);
      res.json({url: url});
  });
};

这将成功检索以下形式的预签名网址：

https：// [my-bucket-name] .s3.amazonaws.com / 1233456？AWSAccessKeyId = [My-ID]＆Expires = 1517063526＆Signature = 95eA00KkJnJAgxdzNNafGJ6GRLc％3D （我必须包含过期标头吗？）

回到客户端（Web应用程序），我使用angular来生成HTTP请求。我曾经用过$ http和ngFileUpload，但都缺少类似的成功。这是我的ngFileUpload代码。

Upload.upload({
    url: responce.data.url, //S3 upload url including bucket name
    method: 'PUT',
    'Content-Type': file.type, //I …

我一直在努力让ngFileUpload 工作,以便我可以上传图像并将它们发送到数据库 - 在我的情况下是一个mongoLab数据库接受JSON对象,可以使用如下POST语法编辑:

$http.post('myMongoName/myDb/myCollection/myTable', {'key': 'value'})

相当简单.但是,我对如何将使用上传的图像发送ngFileUpload到数据库感到困惑.我正在使用ngFileUpload文档页面上介绍的熟悉语法:

$scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                console.log(file);
             Upload.upload({
                url: myMongoLabURL,
                fields: {'sup': 'sup'},
                file: file
                })
             }).success(function (data, status, headers, config) {
                    console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                });
            }
        }
 }

但是,在记录file对象时,我得到了对象:

File {}
$$hashKey: "object:76"
lastModified: 1433922719000
lastModifiedDate: Wed …

我正在尝试将ng-file-upload和carrierwave结合起来上传多个文件,但服务器端的控制器只接收一个文件(所选文件的最后一项).

客户方(参考)

HTML

<button type="file" ng-model="files" ngf-select ngf-multiple="true">Upload</button>

JS

var upload = function (files, content) {
    return Upload.upload({
        url: 'MY_CONTROLLER_URL',
        file: files, // files is an array of multiple files
        fields: { 'MY_KEY': 'MY_CONTENT' }
    }).progress(function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
    }).success(function (data, status, headers, config) {
        console.log('files ' + config.file.name + ' uploaded. Response: ' + data);
    }).error(function (data, …

我正在使用 ng-file-upload 来预览和上传图像。在上传图像之前，我想让用户裁剪图像。我尝试使用 ng-img-crop，但它没有我想要的功能（宽高比自定义），但是cropper 有（https://github.com/fengyuanchen/cropper/）。我现在唯一的问题是如何使用cropper 裁剪图像的预览。图像 src 最终成为一个 blob，即“blob:XYZ”。有没有人以这种方式成功使用过cropper？是否可以？

HTML:

<div
  ngf-select
  ngf-keep="true"
  ng-model="vm.photos"
  ngf-accept="'image/*'"
  ngf-pattern="'image/*'"
  ngf-multiple="true">
  Select
</div>
<button ng-click="vm.uploadPhotos()">Upload</button>

客户端JS:

vm.uploadPhotos = function() {
  _.forEach(vm.photos, function(photo) {
      PhotoCol.insert(photo);
  });
};

服务器JS:

PhotoCol = new FS.Collection('propertyPhoto', {
  stores: [
    new FS.Store.FileSystem('original')
  ],
  filter: {
    allow: {
      contentTypes: ['image/*']
    }
  }
});

PhotoCol.allow({
  insert: function() {
    return true;
  },
  update: function() {
    return true;
  },
  remove: function() {
    return true;
  },
  download: function() {
    return true;
  }
});

上传开始时,我需要一种方法来取消一个或所有上传过程.并且CollectionFS在上传完成之前在数据库中创建记录,因此如果由于某种原因用户在完成上传过程之前终止了浏览器,那么我将有一个没有上传文件的照片条目.在这里,我需要捕获该错误以从DB中删除条目.有任何想法吗？