javascript - 如何使用ReactJS和Axios上传文件

Question

使用 react-bootstrap 表单发布文件和一些数据:

<Form
    onSubmit={this.handleSubmit}
>
    <Form.Group controlId="newTeacher.name">
        <Form.Label>Teacher Name</Form.Label>
        <Form.Control
            type="text"
            name="name"
        />
    </Form.Group>
    <Form.Group controlId="newTeacher.description">
        <Form.Label>Description</Form.Label>
        <Form.Control
            as="textarea"
            rows="3"
            name="description"
            placeholder="Description"
        />
    </Form.Group>
    <Form.Group controlId="newTeacher.avatar">
        <Form.Label>Avatar</Form.Label>
        <Form.Control
            type="file"
            name="avatar"
        />
    </Form.Group>
    <Button
        variant="primary"
        type="submit"
    >Save Teacher</Button>
</Form>

当我尝试使用 Axios 向服务器发送数据时:

handleSubmit = (e) => {
    if (e && e.preventDefault()) e.preventDefault();

    const formData = new FormData(e.target);

    const name = formData.get('name');
    const content = formData.get('description');
    const avatar = formData.get('avatar');

    const requestBody = {
        name,
        content,
        avatar,
        token: cookie.getItem('token'),
    };

    axios.post(apiUrl + "/api/v1/admin/teacher", requestBody,
        {
            mode: 'cors',
            headers: 'multipart/form-data'
        }
    ).then(response => {
        console.log('response:');
        console.log(response);
    }).catch(error => {
        console.log('reject:');
        console.log(error);
    });
};

当我提交表单时，这是控制台中返回的内容(这是来自 Axios 的拒绝消息。):

reject: TypeError: "name.toUpperCase is not a function"

如何修复它？

更新: 该脚本无法正常工作。 我将为遇到此问题的人更新此内容。

数据必须附加:

const requestBody = new FormData();
requestBody.append("avatar", avatar);
requestBody.append("name", name);
requestBody.append("content", content);

并且multipart/form-data不是必需的。在某些情况下，Multer 会出现问题。另外， token 应该位于 header 中:

axios.post(apiUrl + "/api/v1/admin/teacher", requestBody,
    {
        mode: 'cors',
        headers: {
            'x-access-token': cookie.getItem('token'),
        }
    }
).then(response => {
    // SOME ACTION.
})

Answer 1

Axios 期望 header 作为对象，因此将 header 作为对象传递。

示例

 axios.post(apiUrl + "/api/v1/admin/teacher", requestBody,
      {
            mode: 'cors',
            headers: { 'Content-Type':  'multipart/form-data' }
      }
 ).then(response => {
     //...
 });