react gluejar blob图像上传到静态服务器

Question

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

从基本样本开始：

<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

我应该如何继续创建这样的对象，从上面显示的Gluejar返回开始？

提前感谢

Answer 1

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>

并创建如下的流程方法：

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, …}