React.js多图上传：如何同时实现图片预览与获取文件？

核心思路是在状态中存储包含文件本身和预览URL的对象，而非单独存储URL或文件，这样就能同时满足预览和上传的双重需求。

修改后的完整代码 #

export const MultiImageUpload = () => {
  // 状态数组存储包含file和previewUrl的对象
  const [selectedImages, setSelectedImages] = useState([]);

  const onSelectFile = (event) => {
    const selectedFiles = event.target.files;
    const selectedFilesArray = Array.from(selectedFiles);
 
    const imagesArray = selectedFilesArray.map((file) => {
      // 返回包含文件和预览URL的对象
      return {
        file: file,
        previewUrl: URL.createObjectURL(file)
      };
    });
    
    setSelectedImages((previousImages) => previousImages.concat(imagesArray));
    
    // 重置input解决Chrome的bug
    event.target.value = "";
  };

  function deleteHandler(targetImage) {
    setSelectedImages(selectedImages.filter((image) => image !== targetImage));
    // 撤销对应的预览URL释放资源
    URL.revokeObjectURL(targetImage.previewUrl);
  }

  // 如需获取待上传的文件数组，可通过以下方式
  const getUploadFiles = () => {
    return selectedImages.map(image => image.file);
  };

  return (
    <div>
      {/* 渲染预览图 */}
      {selectedImages.map((image, index) => (
        <div key={index}>
          <img src={image.previewUrl} alt="预览图" style={{width: '100px', height: '100px'}} />
          <button onClick={() => deleteHandler(image)}>删除</button>
        </div>
      ))}
      <input type="file" multiple onChange={onSelectFile} />
    </div>
  );
};

关键修改点说明 #

• 状态结构调整：将selectedImages的元素从单一的URL/文件，改为包含file（原始文件对象）和previewUrl（预览地址）的对象，同时保留两种核心信息。
• 预览渲染：组件渲染时，使用image.previewUrl作为图片的src属性实现预览效果。
• 文件获取：需要上传时，通过selectedImages.map(img => img.file)即可提取所有待上传的文件对象。
• 资源清理：删除图片时，针对对象中的previewUrl调用URL.revokeObjectURL，避免浏览器内存泄漏。

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