亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue中使用elementUI組件手動(dòng)上傳圖片功能

 更新時(shí)間：2019年12月13日 10:12:34   作者：NovemberChopin  
Vue是一套構(gòu)建用戶界面的框架， 開(kāi)發(fā)只需要關(guān)注視圖層， 它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目的整合。這篇文章主要介紹了vue中使用elementUI組件手動(dòng)上傳圖片,需要的朋友可以參考下

Vue框架簡(jiǎn)介

Vue是一套構(gòu)建用戶界面的框架， 開(kāi)發(fā)只需要關(guān)注視圖層， 它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目的整合。是基于MVVM（Model-View-ViewModel）設(shè)計(jì)思想。提供MVVM數(shù)據(jù)雙向綁定的庫(kù)，專注于UI層面

使用elementUI上傳圖片時(shí)遇到跨域問(wèn)題，所以需要自己寫(xiě)一個(gè)手動(dòng)上傳圖片的方法

代碼：

html

  <el-upload
            class="upload-demo"
            ref="upload"http://綁定ref 清空時(shí)會(huì)用到
            :limit="1" //最多可上傳1張
            :http-request="ImgUploadSectionFile" //上傳方法
            :with-credentials="true"
            :auto-upload="true"
            accept=".png,.jpg,.gif,.svg"http://上傳文件的后綴名
            action=""http://文件上傳地址 我用的手動(dòng)上傳所以為空
            list-type="list"
            :file-list="fileList">
             <el-button slot="trigger" type="primary">選取圖片</el-button>
           </el-upload>

method

 ImgUploadSectionFile(param){//圖片上傳
      let formData = new FormData();//formdata格式
        formData.append('Img', param.file);
        request.post("url", formData).then(res => {
          if (res.code == 200){//成功
            console.log(res)
          }
        });
    }

我做的是 后臺(tái)返回上傳的圖片字符串地址 然后我加到對(duì)象中點(diǎn)擊總按鈕時(shí)再發(fā)送到后臺(tái) 所以添加結(jié)束之后需要加下面這行代碼

this.$refs.upload.clearFiles();//清空

總結(jié)

以上所述是小編給大家介紹的vue中使用elementUI組件手動(dòng)上傳圖片功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論