window.open 由于活动文件选择器 Chome 更新而被阻止

Question

我在 React 中尝试以下代码，在 Chrome（更新）和 Opera 浏览器中收到以下错误。知道如何解决吗？

return (
<Button
  component="label"
  role={undefined}
  variant="contained"
  tabIndex={-1}
  startIcon={<CloudUploadIcon />}
>
  Upload file
  <VisuallyHiddenInput type="file" onChange={handleFileUpload} />
</Button>

）；

const handleFileUpload = (e) => {
if (!e.target.files) {
  return;
}
const file = e.target.files[0];
const filename = file.name;

window.open(
  import.meta.env.VITE_DAEJAVIEWER + `?image="${filename}"`, // a simply url
  "_blank"
);

};

const VisuallyHiddenInput = styled("input")({
  clip: "rect(0 0 0 0)",
  clipPath: "inset(50%)",
  height: 1,
  overflow: "hidden",
  position: "absolute",
  bottom: 0,
  left: 0,
  whiteSpace: "nowrap",
  width: 1,
})

错误：

另请注意，Firefox 可以正常工作，但在 Chrome、Opera、Edge 中则不行

谢谢

Answer 1

这是因为您引用的是当前文件。您需要将其转换为另一个 blob，以便它引用活动文件之外的另一个文件。您可以在这里尝试一下。

function base64toBlob(base64Data, contentType) {
  contentType = contentType || "";
  const sliceSize = 1024;
  const byteCharacters = atob(base64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
}

const handleTab = (url) => {
  const newTab = window.open(`${url}`, "_blank");
  if (newTab) {
   
    newTab.addEventListener("unload", () => {
      URL.revokeObjectURL(url);
    });
  } else {
    console.log("error", "haha");
  }
};

const handleFiles = (file) => {
  const fr = new FileReader();
  fr.onload = function () {
    console.log(fr.result);
    const blob = base64toBlob(
      fr.result.replace("data:application/pdf;base64,", ""),
      file.type
    );
    const url = URL.createObjectURL(blob);
    handleTab(url);
  };
  fr.readAsDataURL(file);
};

const fielInput = document.querySelector("#file");
fielInput.addEventListener("change", (e) => {
  if (!e.target.files[0]) return;
  handlePDF(e.target.files[0]);
});