将图像从 React 上传到 ASP.NET Core Web API答案

【问题标题】：Upload a image from react to ASP.NET Core Web API将图像从 React 上传到 ASP.NET Core Web API
【发布时间】：2020-05-10 08:01:43
【问题描述】：

我尝试将图像从反应挂钩上传到 ASP.NET Core Web API。到目前为止，我可以在反应中上传图像，但是当我将图像发送到服务器时，我得到了 null。

这是客户端代码：

演示文稿：

<DropzoneArea
acceptedFiles={['image/*']}
onChange={onChange}
showFileNames
dropzoneText="Drag And Drop / Upload Identity Card Photo Here "
showAlerts={false}
filesLimit={1}
/>

逻辑：

const [personPhoto, setPersonPhoto] = useState([]);
 const onChange = (e) => { 
        setPersonPhoto(e)
    }
const submitForm = () => {
        let form = new FormData();    
        for(var i = 0; i<personPhoto.length; i++)
            form.append('image', personPhoto[i]);
        console.log(form);   
        CandidatePost(form).then( result => {
            setMessage(result.message);
            if(result.messageType === MessageType.info)
                setMessageType(MessageType.infoFormat);
            else
                setMessageType(MessageType.errorFormat);    
        })
        .catch(error => {
            setMessage(error.message);
            setMessageType(MessageType.errorFormat);
        });
    }

请求：

const CandidatePost = async (form) => { 
  return await Post(form, CANDIDATES_API_URL);
}

const Post = async (item, url) =>{     
  var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  var requestOptions = 
    {
      method: 'POST',
      headers: myHeaders,             
      redirect: 'follow',
      body: JSON.stringify(item)
    };
    return await fetch(url, requestOptions)
      .then(response =>{return response.json(); })
      .then(result => {return result; })
      .catch(err => {return err; });    
}

服务器端代码：

[HttpPost]
public async Task<IActionResult> PostImage([FromForm] IFormFile Image)
{
    // here I must do operation with my image but is always null
    srvImage.SaveImage(image);
}

我需要做什么才能将我的图像发送到服务器？

【问题讨论】：

标签： react-hooks asp.net-core-webapi

【解决方案1】：

当我将图像发送到服务器时，我得到 null

您似乎想通过表单数据上传图像文件，要实现它，请修改代码以删除您设置的'Content-Type': 'application/json' Header并将formdata（item）提供给请求的正文，如下所示。

const Post = async (item, url) =>{     
  var requestOptions = 
    {
      method: 'POST',          
      redirect: 'follow',
      body: item
    };
    return await fetch(url, requestOptions)
      .then(response =>{return response.json(); })
      .then(result => {return result; })
      .catch(err => {return err; });    
}

测试结果

带输入的表单

获取上传的图片文件

【讨论】：