Question

我正在尝试在我的React应用程序中上传照片以及一些表单数据。它适用于从 ItemList.jsx 的子组件 ItemAdd.jsx 上传表单数据。但是，当我尝试使用此数据POST一个图像文件时，图像属性在它到达服务器时为set.seed(32418) sim <- rexp(100) + rnorm(100,0,.01) hist(sim, freq=FALSE) curve(dexp(x, rate=1, log=FALSE), add = TRUE)。我的怀疑是我在请求中使用了错误的内容类型，但我不确定我应该使用什么（如果这是问题）。

父组件 - ItemList.jsx

undefined

子组件 - ItemAdd.jsx

import React from 'react';
import 'whatwg-fetch';
import classNames from 'classnames';
import ItemAdd from './ItemAdd.jsx';

export default class ItemList extends React.Component {
    constructor() {
        super();
        this.createItem = this.createItem.bind(this);
    }

    createItem(newItem) {
        console.log('PHOTO:', newItem.image);
        fetch('/api/item', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(newItem),
        }).then(response => {
        }).catch(err => {
        });
    }

    render() {
        return (
            <div>
                <ItemAdd createItem={this.createItem} />
            </div>
        );
    }
}

Answer 1

您可能无法将图像作为JSON数据的一部分发布，在图像上调用JSON.stringify（）并不是一个好主意。我建议使用formData提交表单，使其成为multipart/form-data内容类型。您可能必须在后端以不同方式处理。

示例：

createItem(newItem) {
    console.log('PHOTO:', newItem.image);
    const h = {}; //headers
    let data = new FormData();
    data.append('image', newItem.image);
    data.append('name', newItem.name);
    h.Accept = 'application/json'; //if you expect JSON response
    fetch(/api/item', {
      method: 'POST',
      headers: h,
      body: data
    }).then(response => {
    }).catch(err => {
    });p;
  }

您可以在formData：https://developer.mozilla.org/en-US/docs/Web/API/FormData

上阅读更多内容

在React中使用表单数据上传图像

1 个答案: