首页 > 解决方案 > PouchDB 无法将 blob 转换为图像 src 的 url

问题描述

嘿伙计们,我正在使用 PouchDB 并做出反应。文件上传工作正常,但是当我尝试将 blob 转换为 url 时,我在控制台中遇到此错误。

“无法在‘URL’上执行‘createObjectURL’:重载解析失败。”

我检查了返回,我能够将所有数据/图像检索到控制台中,并且基本上可以看到文件类型等等。无论如何,我听说“createObjectURL”已被弃用,但我跟进了 PouchDB 文档中提供的教程。所以我现在不确定。有人可以给我任何见解或帮助吗?谢谢

片段如下:

 // uploading files
    const uploadF = e => {
        // saving chosen file
        const file = e.target.files[0];

        // generating random number and converting it to the string
        const random_id = Math.floor(Math.random() * 10000);
        const random_id_to_string = String(random_id);

        console.log(file);

        // insert data into local DB
        db.post({
            _id: random_id_to_string,
            _attachments: {
                fileName: {
                    content_type: file.type,
                    data: file
                }
            }
        })

        // insert data into remote db
        redb.post({
            _id: random_id_to_string,
            _attachments: {
                fileName: {
                    content_type: file.type,
                    data: file
                }
            }
        })

        // upload file to s3 bucket
        S3FileUpload.uploadFile(e.target.files[0],config)
        .then(data => {
            console.log(data);
        })
        .catch(err => console.log(err))
    }

    // retrieve all data from db
    const files = [];
    db.allDocs({
        include_docs: true,
        attachments: true
    }).then(function (result) {
        return result;
    })
    .then(function(blob){
        const url = URL.createObjectURL(blob);
        console.log(url);
    })
    .catch(function (err) {
        console.log(err);
    });
    

    return(
        <section className="hero"> 
            <nav>
                <h2>Welcome</h2>
                <button onClick={handleLogout}>Logout</button>
                <input type="file" onChange={e => uploadF(e)} />
            </nav>
        </section>
    );

标签: javascriptreactjspouchdb

解决方案


推荐阅读