React多页表单图片回显与Axios上传问题求助

问题1：input[type="file"]无法回显图片 #

浏览器出于安全限制，不允许修改input[type="file"]的value或直接赋值文件对象，所以无法让input本身显示已选文件。我们可以通过显示预览图来模拟回显效果，同时保留上传按钮的功能。

修改存储逻辑 #

将图片的完整信息（base64、文件名、类型）存入sessionStorage，而不是只存base64：

const getBase64FromUrl = async (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      const base64data = reader.result;
      // 存储包含完整信息的对象
      sessionStorage.setItem("deceasedPhoto", JSON.stringify({
        base64: base64data,
        name: file.name,
        type: file.type
      }));
      resolve(base64data);
    };
  });
};

const handleChange = function loadFile(event) {
  if (event.target.files.length > 0) {
    const selectedFile = event.target.files[0];
    // 直接传入文件对象，不用先转objectURL
    getBase64FromUrl(selectedFile).then(base64 => {
      setFile({
        url: base64, // 用base64作为预览URL
        file: selectedFile,
        name: selectedFile.name,
      });
    });
  }
};

添加预览图显示 #

在JSX中添加预览图，当存在已保存的图片时显示，否则显示上传按钮：

<>
  {/* 预览图 */}
  {file.url && (
    <div style={{ marginBottom: 8 }}>
      <img 
        src={file.url} 
        alt="已上传图片" 
        style={{ width: 100, height: 100, objectFit: "cover" }} 
      />
    </div>
  )}
  <label htmlFor="icon-button-file">
    <Input
      accept="image/*"
      onChange={handleChange}
      id="icon-button-file"
      type="file"
      sx={{ display: "none" }}
    />
    <IconButton
      sx={{ bgcolor: "#000000", m: 0 }}
      aria-label="upload picture"
      component="span"
    >
      <PhotoCamera
        sx={{ color: "#ffffff", height: 12, width: 12, p: 0 }}
      />
    </IconButton>
  </label>
</>

修改回显逻辑 #

在useEffect中读取sessionStorage的完整信息，生成预览URL和正确的File对象：

useEffect(() => {
  const savedPhoto = sessionStorage.getItem("deceasedPhoto");
  if (savedPhoto) {
    const { base64, name, type } = JSON.parse(savedPhoto);
    // 转成File对象
    const file = dataURLtoFile(base64, name, type);
    setFile({
      url: base64, // 直接用base64作为预览URL
      file: file,
      name: name,
    });
  }
}, []);

// 优化dataURLtoFile函数，支持传入type参数
function dataURLtoFile(dataurl, filename, type) {
  const arr = dataurl.split(',');
  const mime = type || arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new File([u8arr], filename, { type: mime });
}

问题2：Axios无法发送图片 #

发送文件需要用FormData格式，并且确保File对象是有效的。

Axios发送示例 #

import axios from 'axios';

const submitForm = async () => {
  if (!file.file) return;

  const formData = new FormData();
  // append文件，第三个参数是文件名
  formData.append('deceasedPhoto', file.file, file.name);

  try {
    await axios.post('/your-api-endpoint', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    console.log('图片上传成功');
  } catch (error) {
    console.error('上传失败:', error);
  }
};

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