从对象中提取Base64字符串

Question

I am sending a base64 string to my node.js server. But its adding the string inside object brackets {}

Front-end code:

I encode the base64 string to preserve it.

  let options = {
        headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
     };

let encodedImage = encodeURIComponent(body);

return this._http.put<IUser>(`${BASE_URL}/api/users/${id}/photo`, encodedImage, options)
  .map(data => {
    return data;
  })
  .catch(err => {
    // do whatever you want when error occurs
    console.log(err);

    // re-throw error so you can catch it when subscribing, fallback to generic error code
    return Observable.throw(err || 'API_ERROR');
  });

}

Serverside:

let upload = (req, res) => {

 let b64string = req.body;
 console.log(b64string);

}

The console log is:

{ 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA.....+idkVe3H/9k=': '' }

How can I extract the base64 string from within the object so I can access it. it seems like a simple thing but my brain has given up. Any help will be greatly appreciated.

Update:

Update 2:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

Answer 1

There seems to be something putting your string in an JSON encoded value, hence the {'...' : '...'}. You could put the base64 encoded string in an json object from the get go, that way you have an expected input when you get the object. You just need to get the string from the json key.

Hope this helps.

Answer 2

The problem here is that you creating a PUT request with

Content-Type : application/x-www-form-urlencoded but you pass a single string as your data. So the body-parser sees this string as a key with an empty value and that's why you get this console log.

So the solution to this,

let options = {
  headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};

let requestBody = new URLSearchParams()

requestBody.append('encodedImage',body)


return this._http.put < IUser > (`${BASE_URL}/api/users/${id}/photo`, requestBody, options)

So we said we have a content type of form-urlencoded (that means all of your data will be passed as giant url query) and we passed a urlencoded form (through the URLSearchParams)

Please bear in mind URLSearchParams browser compatibility.

Please consider using multipart/form-data for your file uploads instead, if you don't have any limitations. The logic of the above will be the same except the new URLSearchParams() will be new FormData() .