【问题标题】:Ng-file-upload: Sending array to Web Aping-file-upload:将数组发送到 Web Api
【发布时间】:2019-02-04 16:01:17
【问题描述】:

使用 angularjs 1.3 和 C# .net core web api

我有一个用于上传文件的 ng-file-upload。当调用上传方法时,我想将一些数据的额外数组传递给上传方法,然后由我的 web api 上的方法接收。这是我的 ng-file-upload

factory.upload = function (file, myArray) {
    var url = '{0}upload'.format(apiPath)
    return Upload.upload({
        url: url,
        arrayKey: '',
        data: { file: file, myArray: myArray}
    }).then(function (res) {

        return res;
    });
};

下面是我的 webapi:

  [HttpPost("upload")]
   public async Task<IActionResult> FileUpload(IFormFile file, List<string> myArray)
   {
        //code
   }

最后这里是我尝试传递的数组并上传到我的 webapi:

  [
   {
     id: "1",
     name: "steve"
   },
   {
     id: "2",
     name: "adam"
   }
  ]

问题出在我的 webapi 中,从 UI 接受数组的 myArray 参数始终为空。我在网上搜索并提到要添加

 arrayKey: '' 

但是还是不行。有输入吗?

---更新---

我创建了一个字符串数组:

var cars = ["steve", "adam", "ronnie"];

并将我的 api 更新为:

List<ArrayItem> myArray

上面的代码有效。所以看起来传递数组有问题。 我通过这样创建来传递以下数组:

  var myArray= [];
  for (var i = 0; i < myJson.length; i++) {
   myArray.push({
    id: myJson[i].id,
    name: myJson[i].name,
  });                                        
 }  

上面的结果如控制台所示:

Array(2)
0:{id: "1", name: "steve"}
1:{id: "2", name: "adam"}

这里缺少什么?

【问题讨论】:

  • 我没有给你一个准确的答案,但我确实想指出你的 API 方法需要List&lt;string&gt;,但你实际上是在发送它List&lt;object&gt;(可能不是“object ",您可能需要为此 id/name 对象创建一个接口)。也许这就是它为空的原因?
  • @HankScorpio 我已尝试使用该对象也仍然无法正常工作。我的 ng-file-upload 呢,有什么变化吗?

标签: angularjs json asp.net-web-api asp.net-core-webapi ng-file-upload


【解决方案1】:

对于传递对象数组,您需要定义列表对象以接受参数。

  1. 具有Id/Name 属性的ArrayItem。

    public class ArrayItem
    {
    public int Id { get; set; }
    public string Name { get; set; }
    }
    
  2. 改变动作

        public async Task<IActionResult> FileUpload(IFormFile file, List<ArrayItem> myArray)
    {
        return Ok();
    }          
    

更新

你需要删除arrayKey: '[]',试试下面的代码:

app.service('crudService', function ($http, Upload) {

var baseUrl = 'http://localhost:50829';

this.uploadFile = function (file, array) {

    return Upload.upload({
        url: baseUrl + "/api/books/file/upload",
        //arrayKey: '[]',
        data: { file: file, array: array },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function (res) {

        return res;
    }, function (err) {

        throw err;
    });
}; 
});

【讨论】:

  • 我已尝试按上述方式进行更新,但它不起作用,仍然为空。 angularjs 文件上传中是否有需要更新的内容?
  • @user1563677 与我们分享来自 Web 浏览器网络选项卡的请求的屏幕截图。有没有可复制的项目?
  • 这是屏幕截图:imgur.com/a/dXMjNCs 我可以创建一个 jsfiddle,但是如何在其中显示/创建我的 c# api 代码?
  • @user1563677 将我的 api 更新为:List myArray 是什么意思?您需要将List&lt;string&gt; myArray 更改为List&lt;ArrayItem&gt; myArray
  • 抱歉,这是我的错字。我已经按照您的要求进行了更新,但它不起作用。仍然为空
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-11-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-22
相关资源
最近更新 更多