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

问题描述

我试图将一个字符串数组从ReactJS发布到WebApi，但是我只有一个字符串[0]。

这是我的ReactJS代码：

%s

这是我的控制器：

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} />
    </>
  );
};

这是我的UploadFileMany：

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);
            }
        }
        
    }
}

这是ReactJS的数据：

这是来自WebApi的数据：

我希望有3个FileName，而不是用逗号分隔的一项。任何帮助将不胜感激。

解决方法

尝试通过以下方式将文件名作为JSON字符串传递：

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

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

javascript reactjs reactjs webapi