从字节数组加载到 Qml 中的图像

Question

我在 Qt 中创建了一个 C++ 类来读取文件，并将它们转换为字节数组，以便我可以将它们存储在数据库中，
如何处理字节数组数据，例如在 qml 中设置图像源，转换此字节的正确方法是什么数组到 qml 中的相关类型

这是我的课：

#ifndef UFILE_H
#define UFILE_H

#include <QObject>
#include <QQuickItem>
class UFile : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QByteArray data READ data NOTIFY dataChanged)
    Q_PROPERTY(QString path READ path WRITE setPath NOTIFY pathChanged)
    Q_PROPERTY(int length READ length)
public:
    explicit UFile(QObject *parent = nullptr);
    QByteArray data() const;
    QString path() const;
    int length() const;
    void setPath(QString &path);
    void readFile(QString &filePath);
signals:
    void dataChanged(QByteArray data);
    void pathChanged(QString path);
public slots:
private :
    QByteArray _data;
    QString _path;
};

#endif // UFILE_H

cp：

#include "ufile.h"
#include <QDir>

UFile::UFile(QObject *parent) : QObject(parent)
{

}
QByteArray UFile::data() const{
    return _data;
}
QString UFile::path() const{
    return _path;
}
int UFile::length() const{
    int i =_data.count();
    return i;
}
void UFile::setPath(QString &path){
    if(_path== path){
        return;
    }
    _path = path;
    readFile(_path);
    Q_EMIT pathChanged(_path);
}

void UFile::readFile(QString &filePath){
    if(filePath!= ""){
        QString _fp = filePath;
        if(_fp.startsWith("file:///"))
            _fp = QUrl(filePath).toLocalFile();
        if(_fp!= ""){
            _fp = QDir::toNativeSeparators(_fp);
            QFile file(_fp);
            if (!file.open(QIODevice::ReadOnly | QIODevice::Text))
                return ;
            QByteArray bytes;
            bytes = file.readAll();
            _data = bytes;
        }
    }
}

在 qml 中：

UFile{
    id:testfile
    path: "C:/icon.ico"
    onPathChanged: {
        console.log(path)
    }
    Component.onCompleted: {
        console.log(length)
    }
}

我尝试使用此行加载 QImage 并在 qml 中设置图像源，但它卡住了

#ifndef UFILE_H
#define UFILE_H

#include <QObject>
#include <QQuickItem>
class UFile : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QByteArray data READ data NOTIFY dataChanged)
    Q_PROPERTY(QString path READ path WRITE setPath NOTIFY pathChanged)
    Q_PROPERTY(int length READ length)
public:
    explicit UFile(QObject *parent = nullptr);
    QByteArray data() const;
    QString path() const;
    int length() const;
    void setPath(QString &path);
    void readFile(QString &filePath);
signals:
    void dataChanged(QByteArray data);
    void pathChanged(QString path);
public slots:
private :
    QByteArray _data;
    QString _path;
};

#endif // UFILE_H

在 qml 中：

image.source = result of img.loadFromData

Answer 1

一个可能的解决方案是转换为 base64，为此您不应该使用 flag QIODevice::Text，我还添加了改进，以便您的代码更具可读性。

*。H

#ifndef UFILE_H
#define UFILE_H

#include <QObject>
class UFile : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QByteArray data READ data NOTIFY dataChanged)
    Q_PROPERTY(QString path READ path WRITE setPath NOTIFY pathChanged)
    Q_PROPERTY(QString base64 READ base64 NOTIFY base64Changed)
    Q_PROPERTY(int length READ length)
public:
    explicit UFile(QObject *parent = nullptr);
    QByteArray data() const;
    QString path() const;
    int length() const;
    QString base64() const;

public Q_SLOTS:
    void setPath(const QString &path);
    void readFile(const QString &filePath);

Q_SIGNALS:
    void dataChanged();
    void pathChanged(const QString & path);
    void base64Changed();

private :
    QByteArray _data;
    QString _path;
    QByteArray m_base64;
};

#endif // UFILE_H

*.cpp

#include "ufile.h"
#include <QDir>
#include <QUrl>

UFile::UFile(QObject *parent) : QObject(parent)
{

}
QByteArray UFile::data() const{
    return _data;
}
QString UFile::path() const{
    return _path;
}
int UFile::length() const{
    int i =_data.count();
    return i;
}
void UFile::setPath(const QString &path){
    if(_path== path){
        return;
    }
    _path = path;
    readFile(_path);
    Q_EMIT pathChanged(_path);
    Q_EMIT dataChanged();
    Q_EMIT base64Changed();
}

QString UFile::base64() const
{
    return _data.toBase64();
}

void UFile::readFile(const QString &filePath){
    if(!filePath.isEmpty()){
        QString _fp = filePath;
        if(_fp.startsWith("file:///"))
            _fp = QUrl(filePath).toLocalFile();
        if(!_fp.isEmpty()){
            _fp = QDir::toNativeSeparators(_fp);
            QFile file(_fp);
            if (!file.open(QIODevice::ReadOnly))
                return ;
            _data = file.readAll();
        }
    }
}

*.qml

UFile{
    id: uifile
    path : "C:/icon.ico"
}
Image {
    source: uifile.base64.length > 0 ? "data:image/png;base64," + uifile.base64: ""
}