Question

我们有一个应用程序，允许用户为我们网站中的子域设置主题，这包括一些配置数据和上传其徽标以显示在页面顶部的能力。所以基本上我将发送一个上传的图像文件以及作为单个请求在表单中输入的一些附加数据，并在服务器上处理它。根据我所做的研究，在AngularJS中处理文件上传并非易事。

这个应用程序最初使用的是ASP.NET Web Forms，但是我们在AngularJS和Web API中重写它，我还没有完全流利。我知道我可以将文件作为字节数组发送，但是在Web Forms的时代，很多东西都被开发人员隐藏了，现在我实际上需要了解幕后发生的事情。

我已经能够编写一些似乎获取文件字节的代码，并将它们附加到传递给API的作用域对象。没有文件上传数据，所有这些都很有用。当我添加文件上传数据时，我遇到了问题。我正在使用FileReader对象来获取上传图像的字节数组（或缓冲区，它们是相同的吗？）。但是，当我将其发送到API时，图像数据为空，这会导致异常。显然我做的不对。

我有两个问题。首先，我们使用用于与API通信的资源来提供服务。我不知道是否可以修改特定保存操作的标头。代码如下。

根据我所读到的，所有这些都需要在POST操作中发生，但是，如果我正在修改现有数据，我正在使用PUT操作，我担心这不会起作用。我无法确定这是否真的发生了，因为我甚至无法获取图像数据以进入API。

function loadImageFile(e) {
    var file = e.target.files[0];

    if (file) {
        var reader = new FileReader();

        reader.onload = function () {
            var customerLogo = {
                imageBytes: reader.result,
                filename: file.name
            };

            $scope.theme.customerLogo = customerLogo;
        };

        reader.readAsArrayBuffer(file);
    }
    else
        $scope.theme.customerLogo = null;
}

<input id="uploadCustomerLogo" accept="image/*" class="form-control" name="uploadCustomerLogo" type="file" />

function saveTheme() {
    if ($scope.themeDetailForm.$valid) {
        var onSuccess = function (response) {
            refresh();
        };

        var onError = function (response) {
            $window.alert('An error occurred while saving the Theme.');
        };

        if (!$scope.theme.id)
            appFactory.themes.create($scope.theme).$promise.then(onSuccess, onError);
        else
            appFactory.themes.update({ id: $scope.theme.id }, $scope.theme).$promise.then(onSuccess, onError);
        }
    }

angular
    .module('app')
    .factory('appFactory', appFactory);

appFactory.$inject = ['$rootScope', '$resource', 'configs'];

function appFactory($rootScope, $resource, configs) {
    var createOperation = { method: 'POST' };
    var getOperation = { method: 'GET' };
    var queryOperation = { method: 'GET', isArray: true };
    var removeOperation = { method: 'DELETE' };
    var updateOperation = { method: 'PUT' };
    var themes = $resource(buildResourceUrl('Themes/:id'), { id: '@id' }, {
        create: createOperation,
        get: getOperation,
        query: queryOperation,
        remove: removeOperation,
        update: updateOperation
    });

    return { themes: themes };
}

function buildResourceUrl(resourcePath) {
    return configs.apiBaseUrl + resourcePath;
}

我知道网上有一些指令，但我一直犹豫不决，因为我不确定如何将它们与上面显示的“appFactory”集成。为了让这个工作，我需要做什么？我必须在本周完成这个。

AngularJS: how to implement a simple file upload with multipart form?上的文章提到了一种方法，但文件立即上传，这不是我想要的行为。我需要能够与其他数据同时发送文件。我意识到使用文件阅读器结果是一个ArrayBuffer，我需要将它转换为字节数组，我使用新的Uint8Array（reader.result），但是当我在服务器上接收数据时，字节数组有什么都没有。

使用其他数据上传AngularJS中的文件

0 个答案: