javascript - 如何使用 nervgh 的 Angular-File-Upload 发送 formData

标签 javascript asp.net-mvc angularjs

我正在使用 nervgh 的 Angular-File-Upload https://github.com/nervgh/angular-file-upload

当我对 preOpKey 进行硬编码时,它的工作就像一个魅力。我想要做的是将 preOpKey 与文件一起发送,以便我可以将文件保存到数据库中的适当记录中。

angular-file-upload 在我在 $scope.OnPreinspectionSubmit() 中填充的 API 中有一个 fileData 但由于某种原因我找不到它在我的 MVC Controller 中调用一次 SaveFile() 的值。

我只需要知道如何将一个值与我的文件一起传递,然后在我的 MVC Controller 中访问它。我想在 fileData 中发送它会很方便,但这不是回答我的问题所必需的。

这是我的 Angular Controller :

var OperatorPreinspectionControllers = angular.module('OperatorPreinspectionControllers', ['angularFileUpload']);

OperatorPreinspectionControllers.controller('OperatorPreinspectionCtrl', ['$scope', '$http', 'FileUploader',
    function ($scope, $http, FileUploader) {

        $scope.uploader = new FileUploader({
            url: pageBaseUrl + 'image/SaveFile'
        });

        $scope.uploader.filters.push({
            name: 'imageFilter',
            fn: function (item /*{File|FileLikeObject}*/, options) {
                var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
                return '|jpg|png|jpeg|bmp|gif|pdf|'.indexOf(type) !== -1;
            }
        });

        // Send the form data to the database
        $scope.OnPreinspectionSubmit = function () {
            if (confirm("Are you sure you want to save this information?")) {
                $http.post(pageBaseUrl + 'api/PreInspectionForm', $scope.formInformation).success(function (returnData) {
                    $scope.uploader.formData.push({ preOpKey: returnData });
                    $scope.uploader.uploadAll(); // Upload file
                });
            } else { }
        }
    }
]);

这是我的 MVC Controller :

public void SaveFile()
    {
        HttpFileCollectionBase files = Request.Files;
        HttpPostedFileBase uploadedFile = files[0];

        var preOpKey = 123; // ???????

        // Turn the file into bytes
        byte[] data;
        using(Stream inputStream = uploadedFile.InputStream)
        {
            MemoryStream memoryStream = inputStream as MemoryStream;
            if(memoryStream == null)
            {
                memoryStream = new MemoryStream();
                inputStream.CopyTo(memoryStream);
            }
            data = memoryStream.ToArray();
        }

        PreOpManager.SaveImage(preOpKey, data, uploadedFile.FileName, uploadedFile.ContentType);
    }

谢谢,

亚伦

最佳答案

到目前为止,对我来说完美无缺的一个解决方案是:

$scope.uploader.onBeforeUploadItem = onBeforeUploadItem;

function onBeforeUploadItem(item) {
  item.formData.push({your: 'data'});
  console.log(item);
}

根据 https://github.com/nervgh/angular-file-upload/issues/97#issuecomment-39248062

关于javascript - 如何使用 nervgh 的 Angular-File-Upload 发送 formData,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26350299/

相关文章:

javascript - 为 HTML5 Canvas 游戏创建开始屏幕?

javascript - 防止 iframe 重新加载父窗口

asp.net - 使用 Global.asax 设置/检查 session 变量和重定向(用于用户测试)

javascript - 为什么我的 jsp 页面无法识别我的 Angular Controller ?

javascript - 在父窗口的函数中访问子窗口的返回值

javascript - Ng-repeat 列表,其中包含重复元素的多个值的次数

javascript - setState在react中不接受动态值?

javascript - JS RegExp 从第二次出现 <h2> 标记开始,并包含其后的所有内容

c# - ASP.NET MVC 使用数据注释迭代模型属性

javascript - asp.net mvc 6 web api + Angular 资源帖子数组作为对象属性