vue+ bootstrap如何實現(xiàn)圖片上傳圖片展示功能

這篇文章給大家分享的是有關(guān)vue+ bootstrap如何實現(xiàn)圖片上傳圖片展示功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

效果圖如下所示：

html

.....
.......
<-- key=idPicUrl -->
 <div class="col-sm-7" > 
    <img :src="queryFirmInfo[key]" alt=""  class="myimage" :name="key" />
</div>
 <form id="fileForm" enctype="multipart/form-data" class="form-horizontal " >
  <div class="col-sm-5 " >
     <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 ：請求數(shù)據(jù)(new FormData($( "#imgForm" )[0]))
 * @param method：回調(diào)方法
 */
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");
    }
  });
}

感謝各位的閱讀！關(guān)于“vue+ bootstrap如何實現(xiàn)圖片上傳圖片展示功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！