axios postdata 不显示图像，而是在反应中仅显示路径 url答案

【问题标题】：axios postdata does not show image instead shows only path url in reactaxios postdata 不显示图像，而是在反应中仅显示路径 url
【发布时间】：2022-07-05 16:55:27
【问题描述】：

我创建了一个基本的 ReactJS 应用程序来使用表单和 API 执行 crud 操作，我已经成功创建了应用程序来执行所有的 crud 操作，但我面临的唯一问题是在表单中添加图像上传字段并上传图像我只能在控制台和API，和我在上传详情的读取页面有相同的图片路径显示。

我已经给出了用于创建和读取应用程序的代码，验证它们并帮助我找到正确的解决方案。

创建.js：

import React, { useState } from 'react';
import { Button, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useNavigate} from 'react-router-dom';
import Swal from 'sweetalert2';

function Create() {
    let navigate = useNavigate();

    const [image, setImage] = useState('');
    const [companyName, setCompanyName] = useState('');

    const postData = () => {

        const url = `https://62a6f21797b6156bff833b05.mockapi.io/CRUD`

            if(companyName.length <= 3){
                return Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'All fields are mandatory!',
                    showConfirmButton: true
                  })
            }else{
                axios.post(url, {
                    image,
                    companyName
                })
    
            .then(() => {
                navigate('/company/list');
            })
            }
            
    }

    return (
        
        <div>
            <Form className="create-form">
                <Form.Field>
                    <label>Image</label>
                    <input type="file" accept='image' onChange={(e) => setImage(e.target.value)} />
                </Form.Field>
                <Form.Field>
                    <label>Company Name</label>
                    <input  placeholder='Company Name' onChange={(e) => setCompanyName(e.target.value)}/>
                </Form.Field>
                <Button color="blue" onClick={postData} type='submit'>Submit</Button>
            </Form>
        </div>
    )
}

export default Create;

Read.js：

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Table, List } from 'semantic-ui-react';


function Read() {

    const [APIData, setAPIData] = useState([]);
    
    useEffect(() => {
        axios.get(`https://62a6f21797b6156bff833b05.mockapi.io/CRUD`)
            .then((response) => {
                console.log(response.data)
                setAPIData(response.data);
            })
    }, []);

    return (
        <div>
            <Table singleLine>
                <Table.Body>
                    {APIData.map((data) => {
                        return (
                            <Table.Row>
                                <Table.Cell>
                                    <List>
                                        <List.Item>
                                                {data.image}
                                        </List.Item>
                                        <List.Item>
                                                {data.companyName}
                                        </List.Item>
                                    </List>
                                </Table.Cell>
                            </Table.Row>
                        )
                    })}
                </Table.Body>
            </Table>
        </div>
    )
}

export default Read;

根据我对 ReactJS 的了解，我觉得问题出在我使用 axios 发布图像数据的方式上。我不擅长使用 axios，所以我可能误认为 axios 函数用于发布图像。

帮助我解决我面临的问题，提供从 axios 发布图像数据的必要解决方案。

【问题讨论】：

标签： javascript reactjs axios

【解决方案1】：

首先你应该从输入中得到的文件略有不同：

<input type="file" accept='image' onChange={(e) => setImage(e.target.files[0])} />

通过FormData发送文件更容易，试试这个：

let data = new FormData();
data.append('file', image);
data.append('name', companyName);
axios.post(url, data);

我不知道你用什么做后端，但你也应该处理服务器端。

【讨论】：