asp.net - 以Webform显示从REST Web服务检索到的base64图像

Question

我在asp.net和Restful websevice中是新手。
我想使用Rest API将图片从Qt项目发送到服务器。
我用opencv读取图像并将其转换为base64并通过url发送，如下所示:

Mat img = imread("C:\\Users\\piltan\\Downloads\\remove.jpg");
cv::resize(img,img,Size(30,30));
string encoded = base64_encode(img.data, img.rows *img.cols);
QString qenc = QString::fromStdString(encoded);
//cout<<encoded<<endl;
//qenc = "sa";
QEventLoop eventLoop;
QNetworkAccessManager mgr;
QObject::connect(&mgr,SIGNAL(finished(QNetworkReply*))
,&eventLoop,SLOT(quit()));
QNetworkRequest req( QUrl( QString("http://localhost:60733/api/Weather? 
id=")+qenc) );

在服务器端，我有一个 Controller 类，可以在其中成功接收到我的图像字符串。

这是我的接收方法:



并检索我的Qt客户端的字符串长度。

这是我的输出:

  "Image length 1200"

这样我就可以成功发送和接收我的数据。
现在，我想在网络表单和浏览器中显示此base64图像。
我在项目中添加了一个新的Web表单，并在其中放置了一个WebControl图像:


但是我不知道如何将接收到的数据分配给放置的图像对象。
如我所说，我是新手，对Rest API不熟悉。
有谁能够帮助我 ？
非常感谢。

Answer 1

我鼓励您将图像分别上传到Web服务器，而不是将其作为base64发送。特别是如果您使用URL或JSON请求发送base64数据，则请求主体的大小会有一些限制，这可能会对您的应用程序和服务器后端造成问题。

相反，您可以使用HTTP multipart请求并使用该请求发送图像数据。

这是Gist的链接，您可以在其中看到一个有效的示例:
https://gist.github.com/wzyuliyang/ffc0217015658b87e3fd

它使用python作为服务器后端，但是整个过程是您想要的。例如，在Qt实现中，您可以看到如何使用moltipart表单数据发送图像数据:

//path image
QString path("d:\\people3.jpeg");
//php script that receives the image
QNetworkRequest requete(QUrl("http://*.*.*.*:8080/upload"));

QByteArray boundary = "------WebKitFormBoundarytoHka8LUGjq34sBN";
QFile file(path);
if (!file.open(QIODevice::ReadOnly))
{
    qDebug()<<"error read image";
    return;
}
QByteArray fileContent(file.readAll());

QByteArray data = boundary + "\r\n";
data += "Content-Disposition: form-data; name=\"file\"; filename=\"people3.jpeg\"\r\n";
data += "Content-Type: image/jpeg\r\n\r\n" + fileContent + "\r\n";
data += boundary + "--\r\n";
requete.setRawHeader("Content-Type", "multipart/form-data; boundary=----WebKitFormBoundarytoHka8LUGjq34sBN");
requete.setRawHeader("Content-Length", QString::number(data.size()).toLatin1 ());
file.close();
QNetworkAccessManager *am = new QNetworkAccessManager(this);
QNetworkReply *reply = am->post(requete,data);

QObject::connect(am, SIGNAL(finished(QNetworkReply*)), this, SLOT(replyFinished(QNetworkReply*)));

希望能帮助到你。

更新:

使用这种方法，您将在服务器中存储一个图像文件，然后可以设置 src标记的 img属性来查看它。例如:

<img src="http://localhost:8080/images/myimg.jpg">

但是，如果要在图像上显示base64内容，则应执行以下操作:

<img src="data:image/jpeg;base64,/9j/4AAQSk...">

因此，在您的ASP.NET Web表单中，假设您有一个名为 image1的图像控件，则可以显示如下的base64图像:

string imgString = "/9j/4AAQSk..."; // Place your actual base64 string here
image1.ImageUrl = String.Format("data:image/jpeg;base64,{0}", imgString);

此外，如果将图像类型包含在字符串中，则可以简单地使用以下代码:

string imgString = "data:image/jpeg;base64,/9j/4AAQSk..."; // Place your actual base64 string here
image1.ImageUrl = imgString;