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

Posted 2023-03-31

【中文标题】在 ReactJS 中发布了一个字符串数组，但在 WebAPI 中得到了一个字符串

【英文标题】：Posted an array of string in ReactJS but got one string in 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 项，而不是用逗号分隔的一项。 任何帮助将不胜感激。

【参考方案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 个字符串，但无论如何它解决了问题。我给你一个赞成票。谢谢你:)