使用WebService上传ng个文件

本文关键字：文件 ng 上传 WebService 使用 | 更新日期: 2023-09-27 18:29:10

我正在尝试添加将zip文件上传到服务器的功能。客户端是用AngularJS构建的，服务器端是C#ASP.NET，但我无法让它工作。

我的服务器端代码如下：

[System.Web.Script.Services.ScriptService]
public class xyz : System.Web.Services.WebService
{
// Other WebMethods that work fine
    [WebMethod]
    public string UploadFile(byte[] file, string filename)
    {
        // do whatever
    }
}

我正在使用ng文件上传来尝试进行实际的上传。HTML看起来像：

<form>
    <div class="form-group">
        <label class="control-label h3" for="zipFile">Zip File</label>
        <input class="form-control my-file" type="file" ngf-select ng-model="zipFile" id="zipFile" name="zipFile" accept=".zip" required />
    </div>
    <button class="btn btn-default" ng-click="submit()">Submit</button>
</form>

我的控制器中的Javascript看起来是这样的：

FileLoadController.$inject = ['$scope', 'Upload']; 
function FileLoadController($scope, Upload) {
    var vm = this;
    vm.scope = $scope;
    vm.scope.submit = function () {
        if (vm.scope.zipFile) {
            vm.scope.upload(vm.scope.zipFile);
        }
    }
    vm.scope.upload = function (file) {
        Upload.upload({
            url: 'xyz.asmx/UploadFile',
            data: { 'file': file, 'filename': file.name },
            },
        })
        .then(function (response) {
            alert(response);
        });
    }
}

Upload.Upload被调用，但服务器端的UploadFile方法从未被执行。

这可能很简单，但我做错了什么？有更好或更简单的方法吗？

谢谢。

使用WebService上传ng个文件

我最终没有尝试使用现有的WebHandler，而是添加了一个专门用于上传的IHttpHandler。我不想添加不同的处理程序，但只要有效就行。

ng上传文件引用了一个例子（ng文件上传.NET例子），但让我总结一下我所做的。

  1. 在我的项目中添加了一个"通用处理程序"，并称之为UploadHandler
  2. 调整ProcessRequest方法以执行我想要的操作
  3. 更新AngularJS控制器以发送到新的处理程序
  4. 更新HTML以允许大文件
  5. 调整web.config文件以允许上载大文件

（步骤1&2）将GenericHandler添加到项目中会创建一个派生自IHttpHandler的类，它看起来像这个

public class UploadHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        if (context.Request.Files.Count > 0)
        {
            HttpFileCollection files = context.Request.Files;
            for (int i = 0; i < files.Count; i++)
            {
                HttpPostedFile file = files[i];
                string fname = context.Server.MapPath("uploads''" + file.FileName);
                file.SaveAs(fname);
                // Do something with the file if you want
            }
            context.Response.Write("File/s uploaded successfully");
        }
        else
            context.Response.Write("No files uploaded");
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

（步骤3）更新AngularJS控制器使其看起来像这个

    vm.scope.submit = function () {
        if (vm.scope.zipFile) {
            vm.scope.upload(vm.scope.zipFile);
        }
    }
    vm.scope.upload = function (file) {
        Upload.upload({
            url: 'UploadHandler.ashx',
            data: { },
            file: file
        })
        .then(function (response) {
            alert(response.data);
        })
    }

（步骤4）增加了ngf最大大小，因此可以上传1GB的文件

<form>
    <div class="form-group">
        <label class="control-label h3" for="zipFile">Zip File</label>
        <input class="form-control my-file" type="file" ngf-select ng-model="zipFile" id="zipFile" name="zipFile" ngf-max-size="1GB" accept=".zip" required />
    </div>
    <button class="btn btn-default" ng-click="submit()">Submit</button>
</form>

（步骤5）然后我不得不调整web.config文件以允许这些大文件。它包括添加两件事。第一个是添加到httpRuntime的maxRequestLength，如下所示：

<configuration>
  <!--Lots of omitted stuff-->
  <system.web>
    <httpRuntime targetFramework="4.5.1" maxRequestLength="1073741824" />
  </system.web>
</configuration>

第二个是增加一个安全部分，这样大的东西就不会被过滤掉：

<configuration>
  <!--Lots more omitted stuff-->
  <system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="1073741824"/>
      </requestFiltering>
    </security>
  </system.webServer>
</configuration>
相关文章：