上传图片



html

<!--上传图片预览-->

                    < div style = "height: 133px;width:  200px;margin-left:  110px;" >

                        < div style = "border: none;width:100px;height:100px" id = "preview" >

                        </ div >

                        < input type = "file" ( change )= "preview($event) " />

                    </ div >

js

    // 图片上传预览

    preview ( file : any ) {

        this . editImg = false

        let fileInfo = file .target

        this . fileList = fileInfo . files

        var prevDiv = document. getElementById ( 'preview' );

        // prevDiv.innerHTML = ''

        if ( fileInfo . files && fileInfo . files [ 0 ]) {

            var reader = new FileReader ();

            reader . onload = function ( evt : any ) {

                prevDiv . innerHTML = '<img style="height:100px;width:100px" src="' + evt .target. result + '" />' ;

            }

            reader . readAsDataURL ( fileInfo . files [ 0 ]);

        }

        else {

            prevDiv . innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src= \' ' + fileInfo .value + ' \' "></div>'

        }

    }

  let file : File = this . fileList [ 0 ];

        let formData = new FormData ();

        formData . append ( 'file' , file , file .name);

        formData . append ( 'userInfo' , JSON . stringify ( this . newOrEditData ))

        // 开始上传    

        this . CmdbService . postFileByFullUrl ( url , formData ). subscribe ( data => {

            if ( data [ 'code' ] == '000000' ) {

                toastr [ "success" ]( "保存成功" );

                $ ( '#newOrEditUser' ). modal ( 'hide' )

                this . getTableData ()

            } else {

                // $('#newIconUpload').modal('hide')

                toastr [ "error" ]( data [ 'message' ], "提示：" );

            }

        })