如何使用React将图像发送到AspNetCore

时间:2019-03-09 11:12:56

标签: reactjs asp.net-core fetch-api

我试图像这样在我的React应用程序中获取文件:

random.uniform(0, 1)

onSubmit看起来像这样:

function open_books( $atts ) {
    $a = shortcode_atts( array(
        'amount' => 5
    ), $atts );

    $args = array(
        'posts_per_page'    => intval( $a['amount'] ),
        'post_type'         => 'all_books',
    );
    $the_query = Books::search()->where('bookdate', '2019-03-30 11:00:00');

   if ( $the_query->have_posts() ) {
        $ret = '<div id="entity-items">';
        $i = 0;
        while ( $the_query->have_posts() ) {
            if( $i < $a['amount'] ) {
                $i++;
                $the_query->the_post();
                $ret .= Books::template('item')->cache();
            }
        }
    }
    $ret .= '</div>';
    wp_reset_postdata();

    return $ret;
}
add_shortcode( 'open_books', 'open_books' );

我正试图像这样在我的后端接收此消息:

<form onSubmit={this.onSubmit}>
    <label htmlFor="Images">Images:</label>
    <input type="file" id="Images" onChange={this.onChangeImage} accept="image/png, image/jpeg"/>
    <button type="submit" value="SubmitImage" onClick={this.onSubmit}>Submit</button>
</form>

(忽略if语句内部缺乏逻辑,我目前只是想让此函数运行) 我究竟做错了什么?我尝试使用[FromBody],formdata,但没有任何效果。

1 个答案:

答案 0 :(得分:0)

使用FormData发送文件

var formData = new FormData();
formData.append("photo", this.state.Images[0]);
fetch("https://localhost:5001/api/projects/edit/image/" + this.props.projectId + "/add", 
{
    method: "PUT",
    body: formData 
});

并保留IFormFile photo不变。默认情况下,模型绑定程序从表单数据绑定参数,这是正确的行为。或者,您可以将[FromForm]添加到此参数,在这种情况下实际上是相同的。