Post image to private server
Unsolved
QML and Qt Quick
-
Hi,
I want to post image to my private server through arcgis appstudio using javascript, but it receive corrupt image, This is my code below. Even when i console base64 image and convert it through online base64 to image convertor tool, it gives corrupt image something.. what should i doimport QtQuick 2.13 import QtQuick.Layouts 1.13 import QtQuick.Controls 2.13 import ArcGIS.AppFramework 1.0 import Esri.ArcGISRuntime 100.6 import QtQuick.Dialogs 1.0 import Qt.labs.settings 1.0 import QtQuick.Controls.Material 2.1 import "../../controls" as Controls import "../../assets/js/backend.js" as Backend App { id: appdem width: 400 height: 640 ColumnLayout { anchors { fill: parent margins: 10 } ImageObject { id: imageObject onUrlChanged: { console.log("url:", url); } onImageChanged: { var buffer_data = imageObject.toArrayBuffer(); Backend.demo(buffer_data); } } Button { text: "Load" onClicked: { console.log("API Key::"+settings.api_key); var img_path = "/Desktop/Modern-Office-3-Skype-Backgrounds.jpeg"; imageObject.load(img_path); } } Image { fillMode: Image.PreserveAspectFit source: imageObject.url horizontalAlignment: Image.AlignHCenter verticalAlignment: Image.AlignVCenter cache: false } } }
Backeend file code
function arrayBufferToBase64( buffer ) { var binary = ''; var bytes = new Uint8Array( buffer ); var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode( bytes[ i ] ); } return Qt.btoa( binary ); } function demo(img_binary){ var endpoint = 'insertDamageReport'; var base64String = arrayBufferToBase64( img_binary ); console.log(base64String); //create HTTP REQUEST Object var xmlhttp = new XMLHttpRequest(); //Opend request xmlhttp.open('POST', "https://abc.co.nz/wp-json/hhq/v1/"+endpoint, false); ///Set header data xmlhttp.setRequestHeader("Content-Type","application/json"); xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xmlhttp.setRequestHeader("AuthenticationInfo",JSON.stringify({"_key":"","_secret":"","device_id":"","access_token":""}) ); //Set request to server var data = {"booking_id":1,"report_content":"test","images":base64String}; let params = (typeof data != 'undefined')?JSON.stringify(data):'' xmlhttp.send(params); ///Handle Response if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { console.log(xmlhttp.responseText) }else if(xmlhttp.readyState === 4){ console.log(xmlhttp.responseText); } }