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

Question

我是一个新手，尝试在 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>

上面的控制台日志 return 在我将两个图像粘贴到我的组件上之后是这样的：

(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 return 开始创建这样的对象？

提前致谢

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>

并像这样创建 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, …}

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

react-gluejar blob image upload to static server

blob

reactjs