在 ReactJS 中发布了一个字符串数组，但在 WebAPI 中得到了一个字符串答案

【问题标题】：Posted an array of string in ReactJS but got one string in WebAPI在 ReactJS 中发布了一个字符串数组，但在 WebAPI 中得到了一个字符串
【发布时间】：2020-08-27 04:26:08
【问题描述】：

我尝试将一组字符串从 ReactJS 发布到 WebApi，但我只得到一个字符串 [0]。

这是我的 ReactJS 代码：

import React, { useState } from "react";
import axios from "axios";

export const FileUpload = () => {

  const [files, setFiles] = useState();
  const [fileNames, setFileNames] = useState();

  const saveFile = (e) => {

    var tempfiles = files;
    if (tempfiles == null) {
      tempfiles = [];
    }
    tempfiles.push(e.target.files[0]);
    setFiles(tempfiles);

    var tempFileNames = fileNames;
    if (tempFileNames == null) {
      tempFileNames = [];
    }
    tempFileNames.push(e.target.files[0].name)
    setFileNames(tempFileNames);
  };

  const uploadFile = async (e) => {
    debugger
    const formData = new FormData();

    //upload many
    for (let i = 0; i < files.length; i++) {
      formData.append("Files[${i}]", files[i]);
      // formData.append('FileNames[${i}]', fileNames[i]);
    }

    //upload 1
    // formData.append("FormFile", file);


    //add test data
    formData.append('TestField', 'abcxyz');
    formData.append('FileNames', fileNames);
    formData.append('ProjectId', 123);
    formData.append('NameToDisclose', false);
    //

    try {
      //upload many
      const res = await axios.post("https://localhost:44376/api/test/UploadMany", formData);

      ////upload 1
      // const res = await axios.post("https://localhost:44376/api/test/Upload", formData);

      console.log(res);
    } catch (ex) {
      console.log(ex);
    }
  };

  return (
    <>
      <input type="file" onChange={saveFile} />
      <input type="button" value="upload" onClick={uploadFile} />
    </>
  );
};

这是我的控制器：

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using UploadFileToWebApiBE.Model;

namespace UploadFileToWebApiBE.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TestController : ControllerBase
    {
        [HttpPost]
        [Route("UploadMany")]
        public ActionResult Post([FromForm]UploadFileMany files)
        {
            try
            {
                files.Files = Request.Form.Files;

                return StatusCode(StatusCodes.Status201Created);
            }
            catch (Exception ex)
            {
                return StatusCode(StatusCodes.Status500InternalServerError);
            }
        }
        
    }
}

这是我的 UploadFileMany：

using Microsoft.AspNetCore.Http;

namespace UploadFileToWebApiBE.Model
{
    public class UploadFileMany
    {
        public string TestField { get; set; }

        public IFormFileCollection Files { get; set; }

        public string[] FileNames { get; set; }

        public int ProjectId { get; set; }

        public bool NameToDisclose { get; set; } = false;
    }
}

这是来自 ReactJS 的数据：

这是来自 WebApi 的数据：

我想为 FileNames 设置 3 项，而不是用逗号分隔的一项。任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs webapi

【解决方案1】：

尝试使用以下方法将文件名作为 JSON 字符串传递：

formData.append('FileNames', JSON.stringify(fileNames);

然后在后端代码中解析 JSON 字符串。因为我记得 JavaScript 中的 formData 不接受数组和对象作为输入。您可以对它们进行字符串化并以标准格式传递您的数组和对象。我希望这对你有用

【讨论】：

仍然是一个字符串，但它变成了 Json 字符串：["New Microsoft Word Document.docx","text1.txt","New Microsoft Excel Worksheet.xlsx"]
@anhtv13 ：所以没关系。如果您仔细查看["New Microsoft Word Document.docx","text1.txt","New Microsoft Excel Worksheet.xlsx"] ，您会发现它是一个包含 3 个字符串的数组。只需解析 JSON 字符串，您将拥有一个包含 3 个项目的数组。
是的，我可以将其反序列化为数组字符串。您的解决方案没有给我直接的 3 个字符串，但无论如何它解决了问题。我给你一个赞成票。谢谢你:)