Reactjs post 多个值包括文件到 ASP.Net 核心控制器操作

Question

我需要从 ReactJS post 字符串和文件到 ASP.Net Core 2.0 控制器方法并遇到 500 错误并且请求永远不会命中控制器操作方法。这是 ReactJS 代码：

    private submit(e) {
        e.preventDefault();
        let data = new FormData();
        let str = (document.getElementById('TweetString') as HTMLInputElement).value;
        let file = (document.getElementById('TweetFile') as HTMLInputElement).files[0];
        data.append("TweetString", str);
        data.append("File", file);
        fetch('/home/post', {
            method: "post",
            headers: { 'Content-Type': 'multipart/form-data' },
            body: data
        }).then(function (res) {
            if (res.ok) {
                console.log("Perfect! ");
            } else
                console.error("Post error: "+ res.status);
        }).catch(e => {
            console.log("error: " + e);
        });
    }

    <form id="frmTweet" encType="multipart/form-data">
        <div className="row">
            <div className="col-md-6">
                <input type="text" className="form-control" id="TweetString" placeholder="TweetString"></input>
             </div>
             <div className="col-md-6">
                 <input type="file" className="form-control" id="TweetFile" placeholder="Select file to upload..."></input>
             </div>
         </div>
         <div className="row">
             <button onClick={this.submit.bind(this)} className="button">Submit</button>
         </div>
     </form>

这是我的控制器方法签名：

    [HttpPost]
    public async Task<IActionResult> Post([FromForm]string TweetString, [FromForm]IFormFile File) {}

感谢任何建议和见解。谢谢

Answer 1

解决方案：

客户端：使用axios

服务器：使用 IFormCollection

Answer 2

感谢您的 post，这对我有用，我想分享一个示例以供将来参考。

要将 axios 与 react 结合使用，您需要以下 npm 包：react、axios、prop-types、react-axios

我在客户端有这个 React 代码：

import React, { Component } from 'react';
import { post } from 'axios';

export class FileUpload extends Component {
    static displayName = FileUpload.name;

    async handleSubmit(e) {
        e.preventDefault();

        const url = 'api/Books';

        const formData = new FormData();
        formData.append('file', this.refs.File.files[0]);

        var book = {
            title: this.refs.Title.value,
            author: this.refs.Author.value,
            language: this.refs.Language.value
        };
        formData.append('metadata', JSON.stringify(book));

        post(url, formData);
    }

    render() {
        return (
            <div>
                <h1>File Upload</h1>
                <form onSubmit={e => this.handleSubmit(e)}>
                    <div className="form-group">
                        <label>Title</label>
                        <input className="form-control" ref="Title" required />
                    </div>
                    <div className="form-group">
                        <label>Author</label>
                        <input className="form-control" ref="Author" required />
                    </div>
                    <div className="form-group">
                        <label>Language</label>
                        <select className="form-control" ref="Language">
                            <option>English</option>
                            <option>German</option>
                            <option>French</option>
                        </select>
                    </div>
                    <div className="form-group">
                        <label>File</label>
                        <input type="file" className="form-control-file" ref="File" required />
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        );
    }
}

以及 .NET Core Web API2 后端中的以下 C# 代码：

        [HttpPost]
        public void PostBook(IFormCollection bookData)
        {
            var book = JsonConvert.DeserializeObject<Book>(bookData["metadata"]);

            _bookService.AddBookToDb(book, bookData.Files[0]);
        }

Reactjs post 多个值包括文件到 ASP.Net 核心控制器操作

Reactjs post multiple values including a file to ASP.Net Core controller action

post

file-upload

internal-server-error

reactjs

asp.net-core