问题标签 [ng-file-upload]

我有一个控制器：

这基本上用于允许通过ngFileUpload拖放 csv 文件，然后由Papa Parse 解析。在我对 Papa Parse（位于 $scope.parsePapa）的调用中，我需要第二个参数来发送有关上传了哪个文件的信息（只需一个索引就可以）用于稍后的组织目的，第一个参数是文件本身。问题是，如果对于成功功能，我做了这样的事情：

发生的情况是，success只有在两个文件都完成上传后才会调用它。到那时，i已经是 2（在 2 个文件的情况下：0 表示第一次通过，1 表示第二个文件，2 表示第二个文件之后）。如果我使用上面的代码，它不会返回文件，因为files[2]如果上传了两个文件，则索引中没有存储任何内容。

为了解决这个问题，我在 for 循环中使用files了一个循环，它将遍历. 但是，由于会有多个文件，当前的行为实际上是（例如，在上传 2 个文件的情况下）对每个文件进行两次解析。我正在解析具有 1,000,000 行的 csv 文件（稍后进行比较），因此上传两次会影响性能。 filefiles

简而言之，我正在寻找一种仅将每个文件发送到 $scope.parsePapa(file, fileNumber) 的方法。

任何帮助将不胜感激。我对 Angular 完全陌生，所以如果这是我错过的简单事情，请提前道歉。

编辑： danial 解决了这个问题（见下文）。如果有人感兴趣，最终代码如下所示：

}]);

我很难将 ng-file-upload 安装到我的 Yeoman 脚手架 meanjs.org 应用程序中。Bower 安装未完成配置，当我尝试使用具有“上传”依赖项的控制器加载视图时出现错误。这是我第一次尝试将自定义模块安装到 Angular 中。我想我会创建这篇文章来为这个案例提供一些具体的说明，并为处于类似位置的人分享一些一般信息，以准确了解如何使用其他指令扩展脚手架项目。

在寻找解决方案时，我发现了很多对 angular-file-upload 的引用。这是一个不同的包或旧版本，所以不要使用它。

发这篇文章时 ng-file-upload 的版本是：7.0.17。我还安装了可能需要的 ng-file-upload-shim。它为带有 Flash 的非 html5 浏览器添加了文件上传支持。

第 1 步 - 获取 ng-file-upload 源。

Angular 中的所有模块和指令都在文件夹中。您可以在此处从 github 下载文件夹：https ://github.com/danialfarid/ng-file-upload 或使用 bower/npm。

bower install ng-file-upload-shim --save bower install ng-file-upload --save npm install ng-file-upload

Bower 处理前端的依赖项（角度），并将文件夹放入 public/lib/ng-file-upload 和 public/lib/ng-file-upload-shim。如果您手动下载，这就是它需要去的地方。

第 2 步 - 更新您的应用程序配置文件。

这是不明显的部分。Bower 会安装最新版本的源代码和任何依赖项，但不会更新您的配置文件。至少，它目前不适用于 ng-file-upload。

a) 更新 config.js，位于 /public/modules//config.js

如果您使用 yo meanjs:angular-module，则会为您创建这些文件。您会看到如下所示的一行：

var applicationModuleVendorDependencies = ['ngResource', .... 等

您需要将“ngFileUpload”添加到该列表中。这定义了您的模块的依赖关系。

如果您只这样做，您将收到一条错误消息：

[$injector:nomod] 模块“ngFileUpload”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

ngFileUpload 是在 ng-file-upload 文件夹中的脚本文件中定义的，因此显然 Angular 无法知道 ngFileUpload 是什么，除非它以某种方式被告知文件在文件系统上的位置。

b) 更新 all.js，位于 /config/env/all.js

这是您告诉 Angular 要包含文件系统上的哪些文件的地方。我们需要两行，它们可能需要按特定顺序排列（我从其他来源读到它们确实如此，但可能来自旧版本）。无论如何，在 all.js 中，找到

并像这样替换环绕它：

c) 使用正确的名称将依赖项注入到您的模块中

您可能会认为现在，在您的控制器中，您注入了 ngFileUpload，但您需要用于注入的名称是“Upload”。

这是一个具有正确形式的示例控制器：

如您所见，它称为“上传”。没有美元符号或其他任何东西；旧版本使用 $upload，但已更改。

d) 享受

希望这对那些试图解决这个问题的人有用。

I'm using AngularJS (1.2.28) and ng-file-upload directive (7.0.17). On the backend there's a WCF service hosted in IIS 7.

I'm trying to display a progress bar per uploaded file and here's my code:

uploadsController

corresponding markup

the problem

The progress is getting displayed only for the last file in the queue. What is wrong?

我的 HTML 代码：

还有我的角码

我调试了代码，在调试时我得到了两个文件。但它没有调用我的 C# 方法

这里有什么问题？
如果我尝试上传单个图像，它正在工作。

我在 AngularJS 中使用 ng-file-upload 来上传多个文件。我在表单提交时验证并上传文件。当某些文件无效（例如超出 maxSize）时，用户可以删除文件（我从文件中删除此文件以上传数组）。

不幸的是 form.$error 不清楚。如何重新验证表单（文件数组）？

谢谢你的时间。

我在让文件上传与 Angular ng-File-Upload 模块和我的 Node.js 服务器一起工作时遇到问题。在示例中，它说我应该能够通过“文件”或“文件”属性（req.file 或 req.files）访问客户端请求中遇到的文件。但是，根据请求的这些属性是“未定义的”而且我在客户端请求中找不到文件的痕迹。

我的客户端代码如下所示：

用于上传的 HTML 行如下所示：

服务器端目前看起来像这样：

上述两个控制台日志都返回“未定义”。如果有人对如何解决此问题/更好的文件上传方法有任何想法，我将不胜感激。

我有一个项目，我通过ng-file-upload上传照片，我需要在 Python 中使用 selenium webdriver 自动上传过程。

我的 HTML 元素如下所示：

手动上传元素绝对有效。但我找不到在 Python 中使用 Selenium 自动执行此操作的方法。我尝试找到元素，然后发送图像绝对路径的键，但这只是将绝对路径放在浏览器的搜索字段中（就像我在 Mac 上键入“Command + F”一样）

请注意，没有

使用这种上传文件的方法。

任何想法如何使用 Selenium 在 Python 中执行此操作？谢谢！

我正在使用ng-file-upload将图像从 Angular 客户端上传到 node/express 服务器。

正在加载图片，但是没有调用“成功”方法，并且图片上传似乎被多次调用，导致图片重复上传到服务器。

这是我的 HTML 表单：

这是我的 JS：

这是我的服务器端代码：

我在某处读到必须首先包含 shim 库，但我尝试交换加载顺序但没有任何乐趣。这是我的导入行：

此外，查看 Chrome 调试工具 - 上传显示状态为“待处理”。图像肯定在服务器上，进度条（在 html 中）显示 100%。然而，大约一分钟后，该图像的另一个副本出现在文件夹中（此行为似乎循环）并且从未调用 ng-file-upload 'success' 事件。

感谢帮助。

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

我有运行表单提交的 ng-file-upload。我想在用户选择文件后添加一个按钮来取消上传。我努力了：

在控制器中：

当我收到“请选择一个文件”消息时，表单似乎确实重置了，但图像仍然存在 - 在开发工具元素中：

显然我在这里叫错了树。任何人都可以帮忙吗？