React中axios post提交图片仅返回路径无法正常显示问题

当前代码存在3个核心错误，导致图片无法正常上传、展示：

• 文件输入取值错误：<input type="file">的e.target.value仅能获取浏览器出于安全策略生成的本地假路径（格式类似C:\fakepath\xxx.jpg），既不是真实文件数据，也不是可公网访问的资源地址。
• 请求格式错误：图片是二进制文件，不能直接放在JSON请求体中传输，当前逻辑直接把路径字符串塞给JSON参数，后端根本拿不到真实文件，自然只会存储无效的路径字符串。
• 渲染逻辑错误：读取页直接输出{data.image}是纯文本渲染，哪怕拿到了正确的图片地址，也只会显示地址字符串，不会渲染成可视化图片。

Create.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();
    // 存储选中的文件对象，初始值设为null
    const [image, setImage] = useState(null);
    const [companyName, setCompanyName] = useState('');

    const postData = (e) => {
        // 阻止表单默认提交刷新页面
        e.preventDefault();
        const url = `https://62a6f21797b6156bff833b05.mockapi.io/CRUD`

        // 补充图片非空校验
        if(!image || companyName.length <= 3){
            return Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'All fields are mandatory!',
                showConfirmButton: true
              })
        }
        // 用FormData封装二进制文件和其他字段
        const formData = new FormData();
        formData.append('image', image);
        formData.append('companyName', companyName);

        // 提交时设置正确的请求头
        axios.post(url, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(() => {
            navigate('/company/list');
        })  
    }

    return (
        <div>
            {/* 把提交事件绑定到表单上，统一拦截默认行为 */}
            <Form className="create-form" onSubmit={postData}>
                <Form.Field>
                    <label>Image</label>
                    {/* 从files数组取第一个选中的文件对象 */}
                    <input type="file" accept='image/*' onChange={(e) => setImage(e.target.files[0])} />
                </Form.Field>
                <Form.Field>
                    <label>Company Name</label>
                    <input  placeholder='Company Name' onChange={(e) => setCompanyName(e.target.value)}/>
                </Form.Field>
                <Button color="blue" 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, index) => {
                        return (
                            // 列表渲染必须加唯一key
                            <Table.Row key={data.id || index}>
                                <Table.Cell>
                                    <List>
                                        <List.Item>
                                            {/* 用img标签渲染图片，设置固定尺寸避免布局错乱 */}
                                            <img 
                                                src={data.image} 
                                                alt="公司配图"
                                                style={{
                                                    maxWidth: '120px',
                                                    maxHeight: '120px',
                                                    objectFit: 'cover',
                                                    borderRadius: '4px'
                                                }}
                                            />
                                        </List.Item>
                                        <List.Item>
                                                {data.companyName}
                                        </List.Item>
                                    </List>
                                </Table.Cell>
                            </Table.Row>
                        )
                    })}
                </Table.Body>
            </Table>
        </div>
    )
}

export default Read;

• 文件取值逻辑调整：文件选择框不再读取e.target.value，改为读取e.target.files[0]获取真实的文件二进制对象。
• 请求格式调整：所有提交字段封装进FormData实例，axios请求头设置为multipart/form-data，适配二进制文件传输规则，mockapi会自动存储上传的图片，返回可公网访问的HTTPS图片地址。
• 渲染逻辑调整：读取页不再直接输出图片字段的文本值，改用<img>标签绑定图片地址到src属性，实现图片可视化渲染。
• 补充基础体验优化：增加图片非空校验、阻止表单默认刷新行为、给列表项增加唯一key、给图片设置合理尺寸避免布局错乱。

内容的提问来源于stack exchange，提问作者sai charan