如何在删除多文件输入框中的图片时动态更新其值？

预览图片后删除其中一张时，输入框的值保持不变。目前能删除预览的图片，但输入框仍保留已删除图片的信息，导致这些已删除的图片依然会被上传到云端。如果在handleDeleteImg函数中使用filesRef.current.value = null，单张图片场景下有效，但多图预览时删除其中一张，输入框的值会被全部置空。

Ref定义 #

const filesRef = useRef(null);

Redux状态管理代码 #

const initialState = {
    images: [],
};

const productsSlice = createSlice({
  name: "products",
  initialState,
  reducers: {
    deleteImg: (state, action) => {
      const payload = action.payload;
      state.images = payload;
    },
  },
});

文件输入框组件 #

<input
  type="file"
  accept="image/*"
  alt="upload image"
  className="product-images-input"
  name="image"
  onChange={e => {
    handleAddImages({ target: e.target });
  }}
  onClick={e => {
    console.log(e.target.value);
    e.target.value = null;
  }}
  multiple
  hidden
  ref={filesRef}
/>

删除图片函数 #

const handleDeleteImg = i => {
    const newImages = images.filter((_, index) => index !== i);
    dispatch(deleteImg(newImages));
};

图片预览组件 #

{images.length > 0 && (
  <div className="uploaded-img-container">
    {images.map(({ url, name }, index) => {
      return (
        <article className="img-content" key={index}>
          <img
            src={url}
            alt={name || "default name"}
            key={index}
            className="uploaded-img"
            title={name || "default name"}
          />
          <TiDelete
            className="delete-img"
            onClick={() => handleDeleteImg(index)}
          />
        </article>
      );
    })}
  </div>
)}

核心问题是你同时依赖了输入框的files对象和Redux的images数组管理文件，但两者并未同步。浏览器文件输入框的value和files是只读的，无法单独删除某一个文件，只能整体清空。

正确做法是完全自主维护文件列表，不再依赖输入框的files：

1. 在handleAddImages中，将选中的文件（含原始文件对象）保存到Redux状态：

const handleAddImages = ({ target }) => {
  const newFiles = Array.from(target.files);
  // 生成预览URL，并和原始文件对象一起存储
  const newImages = newFiles.map(file => ({
    url: URL.createObjectURL(file),
    name: file.name,
    file: file // 保留原始文件对象用于后续上传
  }));
  // 合并现有图片与新图片（如需追加模式）
  dispatch(deleteImg([...images, ...newImages]));
};

2. 删除图片时，仅更新Redux中的images数组即可，无需操作输入框：

const handleDeleteImg = i => {
  const newImages = images.filter((_, index) => index !== i);
  dispatch(deleteImg(newImages));
};

3. 上传到云端时，从Redux的images数组中提取file对象进行上传：

const handleUpload = async () => {
  const formData = new FormData();
  images.forEach(img => {
    formData.append('images', img.file);
  });
  // 发送请求到后端接口
  await fetch('/your-upload-api', {
    method: 'POST',
    body: formData
  });
};

4. 保留输入框onClick清空value的逻辑，避免重复选择同一文件时不触发onChange：

onClick={e => {
  e.target.value = null;
}}

通过这种方式，你完全通过Redux的images数组管理待上传文件，输入框仅作为文件选择入口，不会再出现删除预览后仍上传已删文件的问题。

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