vue 图片上传 图片展示 bootstrap

效果图

html

............<-- key=idPicUrl --> <div class="col-sm-7" >          <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key" /></div> <form id="fileForm" enctype="multipart/form-data" class="form-horizontal " >    <div class="col-sm-5 " style="margin:0 25%;padding: 0">         <input class="form-control" type="file"  name="file" @change="handleFileChange" ref="inputer" >        </div></form>

vue

 data: {     queryFirmInfo：{     idPicUrl：""     ......    } }

 //选择改变图片          handleFileChange(e){              var vm=this;              let file = e.target.files[0];              let supportedTypes = ['image/jpg', 'image/jpeg', 'image/png'];              if (file && supportedTypes.indexOf(file.type) >= 0) {                  baseFileAjax(new FormData($( "#fileForm" )[0]),function(result){                      if(result.ret==0){                      //提交成功后                      //将图片上传到后台，得到后台图片的路径。                          vm.queryFirmInfo["idPicUrl"]=result.url;                          $("#dForm").formValidation('revalidateField', "idPicUrl");                      }else{                          layer.msg("修改图片失败！")                      }                  })              } else {                  layer.alert('文件格式只支持：jpg、jpeg 和 png');              }          },

/** * @method :form表单提交文件 * @param url ：请求路径 * @param data  ：请求数据(new FormData($( "#imgForm" )[0])) * @param method：回调方法 */function baseFileAjax(data,method){    $.ajax({        url: '/dspark-firm/firmMember/uploadFile.yt' ,        type: 'POST',        data: data,        async: false,        cache: false,        contentType: false,        processData: false,        success: method,        error: function (returndata) {            alert("Connection error");        }    });}