useObjectUrl

輕鬆創建對象 URL。

Usage

即時編輯器

function Demo() {
  const [file, setFile] = useState<File>();
  const url = useObjectUrl(file);

  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const target = e.target;
    const files = target.files;
    setFile(files && files.length > 0 ? files[0] : undefined);
  };
  return (
    <div>
      <p>選擇文件</p>
      <input type="file" onChange={onFileChange} />
      <p>對象 URL</p>
      <div>{url}</div>
    </div>
  );
};

結果

選擇文件

對象 URL

API

useObjectUrl

Returns

string | undefined: 返回一個由 Blob 或 MediaSource 對象生成的 URL（如果存在），否則返回 undefined

Arguments

參數名	描述	類型	預設值
object	文件或者媒体对象	Blob | MediaSource (必填)	-