欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年05月17日 16:05:18   作者:北冥沒有魚  
這篇文章主要介紹了基于vue+ bootstrap實現(xiàn)圖片上傳圖片展示功能,需要的朋友可以參考下

效果圖如下所示:

這里寫圖片描述

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 :請求數(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");
    }
  });
}

以上所述是小編給大家介紹的基于vue+ bootstrap實現(xiàn)圖片上傳圖片展示功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • python虛擬環(huán)境 virtualenv的簡單使用

    python虛擬環(huán)境 virtualenv的簡單使用

    virtualenv是一個創(chuàng)建隔絕的Python環(huán)境的工具。這篇文章主要介紹了python虛擬環(huán)境 virtualenv的簡單使用,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-01-01
  • vue+mock.js實現(xiàn)前后端分離

    vue+mock.js實現(xiàn)前后端分離

    這篇文章主要為大家詳細(xì)介紹了vue+mock.js實現(xiàn)前后端分離,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • 使用vue-cli3打包dist路徑問題修改打包配置

    使用vue-cli3打包dist路徑問題修改打包配置

    這篇文章主要介紹了使用vue-cli3打包dist路徑問題修改打包配置,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 解決el-menu標(biāo)題過長顯示不全問題

    解決el-menu標(biāo)題過長顯示不全問題

    本文主要介紹了如何解決el-menu標(biāo)題過長顯示不全問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,感興趣的朋友們跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-12-12
  • Vue.js中的組件系統(tǒng)

    Vue.js中的組件系統(tǒng)

    這篇文章主要介紹了Vue.js之組件系統(tǒng),本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • Vue.Js中的$watch()方法總結(jié)

    Vue.Js中的$watch()方法總結(jié)

    這篇文章主要給大家介紹了在Vue.Js中的$watch()方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。
    2017-03-03
  • vue使用urlEncode問題

    vue使用urlEncode問題

    這篇文章主要介紹了vue使用urlEncode問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 關(guān)于vite proxy跨域問題的解決

    關(guān)于vite proxy跨域問題的解決

    這篇文章主要介紹了關(guān)于vite proxy跨域問題的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue3頁面加載完成后如何獲取寬度、高度

    vue3頁面加載完成后如何獲取寬度、高度

    這篇文章主要介紹了vue3頁面加載完成后如何獲取寬度、高度問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue3中的element-plus表格實現(xiàn)代碼

    Vue3中的element-plus表格實現(xiàn)代碼

    這篇文章主要介紹了Vue3中的element-plus表格實現(xiàn)代碼,用組件屬性實現(xiàn)跳轉(zhuǎn)路由,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2024-05-05

最新評論