基於vue+ bootstrap實現圖片上傳圖片展示功能，

基於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");    }  });}

以上所述是小編給大家介紹的基於vue+ bootstrap實現圖片上傳圖片展示功能，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！