react-gluejar Blob图片上传到静态服务器

问题描述

我是新手，试图在REACT应用程序上使用react-gluejar将剪贴板中的图像粘贴到组件中，然后将其上传到静态服务器。

从基本示例开始：

<gluejar onPaste={files => {console.log(files)}} errorHandler={err => console.error(err)}>
    {
        images => images.length > 0 &&
        <div>
            <img src={images[images.length - 1]} key={images[0]} alt={`Pasted: ${images[0]}`} />
            <Typography style={{ fontSize: "16px" }} > {images[0]} </Typography>
        </div>
     }</gluejar>

在我将两个图像粘贴到组件上之后，上面的控制台日志返回了以下内容：

(2) ["blob:http://localhost:3000/3ef4e3d9-b8b0-4545-9d24-9fdcb34cb6e9","blob:http://localhost:3000/49e641a5-15bd-49dd-a6ff-d97a4055c04e"]

我需要创建一个可上传的对象，如下所示：

File {name: "214860.jpg",lastModified: 1571432733000,lastModifiedDate: Fri Oct 18 2019 18:05:33 GMT-0300,webkitRelativePath: "",size: 571747,…}lastModified: 571432733000lastModifiedDate: Fri Oct 18 2019 18:05:33 GMT-0300 (Horário padrão de Brasília) {}name: 214860.jpg"size: 571747type: "image/jpeg"webkitRelativePath: ""__proto__: File

如何从上面显示的G​​luejar返回开始创建这样的对象？

预先感谢

解决方法

1-将React-gluejar组件更改为此：

<Gluejar onPaste={files => { process(files) }} errorHandler={err => console.error(err)}>
    {
        images => images.length > 0 &&
        <div>
            <img src={images[images.length - 1]} key={images[0]} alt={`Pasted: ${images[0]}`} />
            <Typography style={{ fontSize: "16px" }} > {images[0]} </Typography>
        </div>
    }</Gluejar>

并创建如下的 process 方法：

const process = async (selectedImage) => {
    try {
        async function createFile(Myfile) {
            let response = await fetch(Myfile);
            let data = await response.blob();
            let metadata = {
                type: 'image/png'
            };
            let file = new File([data],"test.png",metadata);
            console.log(file)
        }
        createFile(selectedImage);

控制台日志将为：

File {name: "test.png",lastModified: 1597521664920,lastModifiedDate: Sat Aug 15 2020 17:01:04 GMT-0300 (Horário Padrão de Brasília),webkitRelativePath: "",size: 6839, …}