如何替换Filebase64实现可自定义样式的Base64图片上传功能

我之前使用FileBase64组件实现图片上传功能，功能正常但无法自定义上传按钮样式。查询得知该组件的按钮不支持定制，因此希望自行实现Base64格式的图片上传功能。找到一份实现代码，但无法整合到自己的NewPost组件中，以下是我的组件代码和参考代码：

我的NewPost组件代码 #

export default function NewPost() {
    const [newPost, setNewPost] = useState({
        userId: '',
        title: '',
        content: '',
        photo: '',
    });
    const [title, setTitle] = useState("");
    const [desc, setDesc] = useState("");
    const [file, setFile] = useState("");
    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const res = await axios.post("/posts/", newPost);
            window.location.replace("/post/" + res.data._id);
            console.log('Saved Successfully');
        } catch (err) {
          console.log(err);
        }
    }
  return (
    <div >
    <form onSubmit={handleSubmit}>
          <div >
          <div >
            <label >Post Title:</label>
            <input type="text"  
            onChange={e => setNewPost({ ...newPost, title: e.target.value })} />
            </div>
            <div >
                <img src={newPost.photo} alt="" />
                <label for="file">
                    <PublishIcon />
                </label>
                <FileBase64
              type="file"
              multiple={false}
              onDone={({ base64 }) => setNewPost({ ...newPost, photo: base64 })}
              /> 
            </div>
            </div>
    </form>
</div>
  );
}

参考实现代码 #

function App() {

  const [baseImage, setBaseImage] = useState("");

  const uploadImage = async (e) => {
    const file = e.target.files[0];
    const base64 = await convertBase64(file);
    setBaseImage(base64);
  };

  const convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        resolve(fileReader.result);
      };
      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };
  return (
    <div className="App">
      <input
        type="file"
        onChange={(e) => {uploadImage(e);}}
      />
      <br></br>
      <img src={baseImage} height="200px" />
    </div>
  );
}

整合后的完整NewPost组件代码 #

import { useState } from 'react';
import axios from 'axios';
import { PublishIcon } from '@mui/icons-material'; // 按实际图标库引入调整

export default function NewPost() {
    const [newPost, setNewPost] = useState({
        userId: '',
        title: '',
        content: '',
        photo: '',
    });
    const [title, setTitle] = useState("");
    const [desc, setDesc] = useState("");
    const [file, setFile] = useState("");

    // 图片转Base64工具函数
    const convertBase64 = (file) => {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = () => {
                resolve(fileReader.result);
            };
            fileReader.onerror = (error) => {
                reject(error);
            };
        });
    };

    // 处理图片上传并更新newPost
    const uploadImage = async (e) => {
        const file = e.target.files[0];
        if (!file) return;
        try {
            const base64 = await convertBase64(file);
            setNewPost(prev => ({ ...prev, photo: base64 }));
        } catch (err) {
            console.error('图片转Base64失败:', err);
        }
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const res = await axios.post("/posts/", newPost);
            window.location.replace("/post/" + res.data._id);
            console.log('Saved Successfully');
        } catch (err) {
          console.log(err);
        }
    };

  return (
    <div>
        <form onSubmit={handleSubmit}>
            <div>
                <div>
                    <label>Post Title:</label>
                    <input 
                        type="text"  
                        onChange={e => setNewPost({ ...newPost, title: e.target.value })} 
                    />
                </div>
                <div>
                    {/* 图片预览 */}
                    {newPost.photo && <img src={newPost.photo} alt="预览图" style={{ maxWidth: '200px', marginBottom: '10px' }} />}
                    {/* 自定义上传按钮：点击label触发隐藏的文件选择框 */}
                    <label htmlFor="file-upload" style={{ cursor: 'pointer', display: 'inline-block' }}>
                        <PublishIcon />
                    </label>
                    {/* 原生文件选择框，隐藏默认样式 */}
                    <input
                        id="file-upload"
                        type="file"
                        accept="image/*" // 限制仅选择图片
                        onChange={uploadImage}
                        style={{ display: 'none' }}
                    />
                </div>
            </div>
        </form>
    </div>
  );
}

关键修改说明 #

• 替换FileBase64组件：用原生<input type="file">替代，通过display: none隐藏默认样式，避免干扰自定义按钮。
• 保留自定义按钮逻辑：用<label htmlFor="file-upload">关联隐藏的文件选择框，点击图标即可触发文件选择，完全支持自定义CSS样式。
• 整合Base64转换逻辑：将参考代码中的转换函数整合到组件中，转换完成后直接更新newPost.photo，和原有提交逻辑保持一致。
• 优化体验：添加accept="image/*"限制仅选择图片，增加图片预览的条件判断，避免空值渲染。

内容的提问来源于stack exchange，提问作者sultan.h