How to parse a formdata whose part is Json file into a Json object?-CodePudding

I want to send a Json file from a Iot plattform to a OPC UA Server node. With the code I get, I can send a Gcode file corectly to the node. When I send the Json file to the Server node, there is always error report on the browser console which indicate the parse of the formData is not successful.

The typescript code for the function defined to send a file to a server node. This function will build a formData, which include the device ID, name space, and node ID and the data need to be written. After building up the formData, the formData will be parsed into a Json object. Then a post request will be made and the successfully parsed formData will be transmitted. When the file is too large, it will be sliced and several parsed formData will be transmitted. When the file is small, the whole filecontent will be transmitted.

sendFileToServer(ns:number,i:number, value) {
let deviceID = this.deviceID;
let message = this.message;
let http = this.http;
let url = this.url;
let options = this.options;

let file = value.target.files[0];
let filename = file.name;
let filesize = file.size;
let formData1 = `{
"deviceId": "replaceID",
"c8y_ua_command_WriteValue": {
"values":{
"ns=replacens;i=replacei": {
"value":"replacePosition"
}}},
"description": "Send gcode filename to OPC UA server"
}`;
formData1 = formData1.replace("replaceID", deviceID);
formData1 = formData1.replace("replacens", String(ns));
formData1 = formData1.replace("replacei", String(i   1));
formData1 = formData1.replace("replacePosition", filename);
let formDataJSON1 = JSON.parse(formData1);
http.post(url, formDataJSON1, options).subscribe(res => {console.log(res);});

let fileReader = new FileReader();
var fileContent ;
fileReader.onload = function(x) {
fileContent = fileReader.result;
fileContent = JSON.stringify(fileContent)
console.log(fileContent)

if (filesize >= 25000){
for (var j=0; j<filesize/25000; j  ){
if (fileContent.substring(j*25000, (j 1)*25000) != '') {
let formData2 = `{"deviceId": "replaceID","c8y_ua_command_WriteValue": {"values":{"ns=replacens;i=replacei": {"value":"replaceFilename"}}},"description": "Send file to OPC server"}`;
formData2 = formData2.replace("replaceID", deviceID);
formData2 = formData2.replace("replacens", String(ns));
formData2 = formData2.replace("replacei", String(i));
formData2 = formData2.replace("replaceFilename", fileContent.substring(j * 25000, (j   1) * 25000));
formData2 = formData2.replace(/\r/g,'\\r');
formData2 = formData2.replace(/\n/g,'\\n');
let formDataJSON2 = JSON.parse(formData2);
console.log(formDataJSON2)
setTimeout(() => http.post(url, formDataJSON2, options).subscribe(res => {console.log(res);}), (j 1)*2000);
}}
let formData3 = `{
"deviceId": "replaceID",
"c8y_ua_command_WriteValue": {
"values": {
"ns=replacens;i=replacei": {
"value": "Json1"
},
"ns=replacens;i=replacei 1": {
"value": "Gcode Filename"
}}},
"description": "Finished sending gcode"
}`;
formData3 = formData3.replace("replaceID", deviceID);
formData3 = formData3.replace(/replacens/g, String(ns));
formData3 = formData3.replace("replacei", String(i));
formData3 = formData3.replace("replacei 1", String(i   1));
formData3 = formData3.replace("replaceFilename", filename);
let formDataJSON3 = JSON.parse(formData3);
setTimeout(() => http.post(url, formDataJSON3, options).subscribe(res => {console.log(res);}), (j 2)*2000);
}
else{
let formData2 =`{
"deviceId": "replaceID",
"c8y_ua_command_WriteValue": {
"values":{
"ns=replacens;i=replacei": {
"value":"replaceFilename"
}}},

"description": "Send file to OPC server"
}`;
formData2 = formData2.replace("replaceID", deviceID);
formData2 = formData2.replace("replacens", String(ns));
formData2 = formData2.replace("replacei", String(i));
formData2 = formData2.replace("replaceFilename", fileContent);
console.log(formData2)
let formDataJSON2 = JSON.parse(formData2);
console.log(formDataJSON2)
setTimeout(() => http.post(url, formDataJSON2, options).subscribe(res => {console.log(res);}), 2000);

let formData3 = `{
"deviceId": "replaceID",
"c8y_ua_command_WriteValue": {
"values": {
"ns=replacens;i=replacei": {
'value': 'Gcode'
}}},
"description": "Finished sending gcode"
}`;
formData3 = formData3.replace("replaceID", deviceID);
formData3 = formData3.replace("replacens", String(ns));
formData3 = formData3.replace("replacei", String(i));
setTimeout(() => http.post(url, formData3, options).subscribe(res => {console.log(res);}),2000);

let formData4 = `{
"deviceId": "replaceID",
"c8y_ua_command_WriteValue": {
"values": {
"ns=replacens;i=replacei 1": {
'value': 'Gcode filename'
}}},
"description": "Finished sending gcode"
}`;
formData4 = formData4.replace("replaceID", deviceID);
formData4 = formData4.replace("replacens", String(ns));
formData4 = formData4.replace("replacei", String(i 1));

setTimeout(() => http.post(url, formData4, options).subscribe(res => {console.log(res);}),2000);
}
    
alert(message);
}
fileReader.readAsText(file);
}

This code is perfect for Gcode transfer. Here is the logged Gcode data.

Here are the segmented and successfully parsed formDatas of Gcode.

Let's take a look at one succesfully parsed formData. One succesfully parsed formData

Then here comes the part for transferring Json file. This is an example Json file.

This is the image of the Json file content.

Here is the logged stringified Json file.

Then this stringified Json file will be packed in a formData. A unparsed formData including a Json file When parsing this formData with Json file, several errors were reported. Errors indicating the parse was unsuccessful

How should I modify my code to successfully parse a formData with Json file packed into a Json object?

CodePudding user response：

So finnaly I figured it out where the error is. The problem is, when I read the JSON file to string, it will automatically get "" sign. In my code, it will additionally get "" sign. So this result in the parse error. My final code looks like this.

sendFileToServer(ns:number,i:number, value) {
let deviceID = this.deviceID;
let message = this.message;
let http = this.http;
let url = this.url;
let options = this.options;

let file = value.target.files[0];
let filename = file.name;
let filesize = file.size;
let formData1 = `{ 
"deviceId": "replaceID", 
"c8y_ua_command_WriteValue": { 
"values":{ 
"ns=replacens;i=replacei": { 

"value":"replacePosition" 
}}}, 
"description": "Send gcode filename to OPC UA server" 
}`;
formData1 = formData1.replace("replaceID", deviceID);
formData1 = formData1.replace("replacens", String(ns));
formData1 = formData1.replace("replacei", String(i   1));
formData1 = formData1.replace("replacePosition", filename);
let formDataJSON1 = JSON.parse(formData1);
http.post(url, formDataJSON1, options).subscribe(res => {console.log(res);});

let fileReader = new FileReader();
var fileContent = "string";
fileReader.onload = function(x) {
fileContent = JSON.stringify(fileReader.result);
// fileContent = fileContent.replace(/\n/g, '')
//  console.log(fileContent)
//  fileContent = JSON.stringify(fileContent)

//  console.log(fileContent.timeline[0])
let formData2 = `{"deviceId": "replaceID","c8y_ua_command_WriteValue": {"values":{"ns=replacens;i=replacei": {"value":replaceFilename}}},"description": "Send file to OPC server"}`;
formData2 = formData2.replace("replaceID", deviceID);
formData2 = formData2.replace("replacens", String(ns));
formData2 = formData2.replace("replacei", String(i));
formData2 = formData2.replace("replaceFilename", fileContent);
console.log(formData2)
// formData2 = formData2.replace(/\r/g,'\\r');
// formData2 = formData2.replace(/\n/g,'\\n');
let formDataJSON2 = JSON.parse(formData2);
console.log(formDataJSON2)
setTimeout(() => http.post(url, formDataJSON2, options).subscribe(res => {console.log(res);}), 2*2000);

let formData3 = `{ 
"deviceId": "replaceID", 
"c8y_ua_command_WriteValue": { 
"values": { 
"ns=replacens;i=replacei": { 
"value": "Gcode" 
}, 
"ns=replacens;i=replacei 1": { 
"value": "Gcode Filename" 
}}}, 
"description": "Finished sending gcode" 
}`;

// formData3 = formData3.replace("replaceID", deviceID);
// formData3 = formData3.replace(/replacens/g, String(ns));
// formData3 = formData3.replace("replacei", String(i));
// formData3 = formData3.replace("replacei 1", String(i 1));
// //  formData3 = formData3.replace("replaceFilename", filename);
// let formDataJSON3 = JSON.parse(formData3);
// setTimeout(() => http.post(url, formDataJSON3, options).subscribe(res => {console.log(res);}), (0 2)*2000);


alert(message);
}
fileReader.readAsText(file);
}