设置MUI type为file的TextField值时触发DOMException异常

为什么会触发这个异常？ #

原生HTML的<input type="file">是只读安全控件，出于浏览器安全限制，它的value属性仅允许两种值：

• 空字符串（用于重置文件选择状态）
• 用户手动选择文件后，浏览器生成的伪本地路径（无法手动设置外部URL、DataURL或自定义字符串）

MUI的TextField组件底层依赖原生input元素，所以当你给type="file"的TextField设置非空的自定义值（比如DataURL、远程图片地址）时，就会触发浏览器的安全限制，抛出Uncaught DOMException。

你的代码问题 #

你把文件读取后的DataURL存在image状态里，然后赋值给TextField的value属性，这完全违反了原生file input的规则，必然会报错。

正确实现方式 #

不要给type="file"的TextField设置非空value，如果需要预览图片，单独用<img>标签展示预览内容即可：

const MyComponent = () => {
  const [imagePreview, setImagePreview] = useState("");

  const handleImageChange = (event) => {
    const file = event.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onloadend = () => {
      setImagePreview(reader.result);
    };
    reader.readAsDataURL(file);
  };

  const resetSelection = () => {
    setImagePreview("");
    // 重置file input的选择状态
    document.querySelector('input[type="file"]').value = "";
  };

  return (
    <div>
      <TextField
        helperText="Cover photo"
        type="file"
        onChange={handleImageChange}
        // 仅保留空value用于重置，或直接省略（浏览器默认空值）
        value=""
      />
      {/* 图片预览区域 */}
      {imagePreview && (
        <div style={{ marginTop: 16 }}>
          <img 
            src={imagePreview} 
            alt="Cover preview" 
            style={{ maxWidth: 200, maxHeight: 200 }} 
          />
          <button onClick={resetSelection} style={{ marginTop: 8 }}>
            移除图片
          </button>
        </div>
      )}
    </div>
  );
};

补充说明 #

MUI文档中提到value类型为any，只是组件层面的类型声明，实际受限于原生input的安全规则，type="file"的输入框不支持自定义非空值。

内容的提问来源于stack exchange，提问作者I.sh.