如何从其路径中获取图像文件元数据

Question

我想在不使用输入的情况下从我的项目文件夹("../assets.cover.png")中的Reactjs上传一个图像文件，当我尝试import cover from "../assets.cover.png"时，它会给我文件路径，但我需要的是上传它的文件元数据。

基本上，我的最终意图是上传图像文件并计算用户上传速度。

Answer 1

在阅读了文档后，我能够解决它

import cover from "../assets/cover.png"; // importing img file
let blob = await fetch(cover).then((r) => r.blob()); //creating blob object
const file = new File([blob], "cover.png", {
type: "image/png",
});
console.log(file);
// output
// {
//   lastModified: 1656486792733
//   lastModifiedDate: Wed Jun 29 2022 12:43:12 GMT+0530 (India Standard Time) {}
//   name: "cover.png"
//   size: 1446458
//   type: "image/png"
//   webkitRelativePath: ""
// }

Answer 2

导入的图像只是一个相对于基本url的文件路径，用于属性，您必须读取该文件才能执行您正在尝试的操作。