pulimurukan Ответов: 0

Как размещать и связывать изображения, поступающие в виде строки BASE64 с сервера в angular 2

I want to send uploaded files to base64 so that I can pass to the request(I am using Remote API's). The problem is that I'm using Angular 2 with Typescript and I couldn't find any info on how to do that. I found that in Javascript it can be done with canvas .

What I have tried:

<pre>I have created a javascript function to convert the image to base64 and get file using

  //insted of ng-Model in the case of file upload
           var ImgeData = event.srcElement.files;
           console.log(ImgeData);
so my index. html contains

    <script type='text/javascript'>
       function encodeImageFileAsURL() {

          // logic for convert to BASE64

           //ng-Model file
           var ImgeData = event.srcElement.files;
           console.log(ImgeData);
       }
       </script>
html will be like

              <input id="inputFileToLoad" type="file" 
                         onchange="encodeImageFileAsURL(); " />
here after selecting the image i am getting the file name and details in

        var ImgeData = event.srcElement.files;
the real confusion coming here after in "ImageData" ive the image(file) details.How can send it along with other json data?

my save methode is something like

          //in Service.ts
             SaveDetails(mar: model) {

    let body = JSON.stringify([
        {
            "Id": 0,
            "Name": mar.Name,
            "Age": mar.Age,
            "ImageUrl": mar.ImageUrl,

            "ImgeData": "how i can pass that Imagedata in 
               javascriptfunction along with these details??? 
                             "
             "updatedBy": "ADMIN",
            "updatedOn": "2017-07-05"

        }
    ]);
    console.log(body);
    let headers = new Headers({
        'Content-Type':
        'application/json; charset=utf-8'
    });
    let options = new RequestOptions({ headers: headers });
    return this._http.post(this.serverurl , body, options)
        .map(res => <model[]>res.json())
        .catch(this.handleError);
}
so the file details getting from js function, send it along with this details How can i send?

same as I need to bind the converted base64 images.how can i bind ?

for binding i ve tried

      <img src="data:image/gif;base64,{{ m.ImgeData}}">
unfortunatly this s not working.. Help me to find a solution to bind/save the file

Thanks.

0 Ответов