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ù)，專(zhuān)注于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)文章
element ui中表單el-form的label如何設(shè)置寬度
這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問(wèn)題詳解(二十多行代碼搞定）
大家在使用element-ui的時(shí)候肯定會(huì)遇到這樣一個(gè)問(wèn)題,就是在你使用級(jí)聯(lián)選擇器的回顯問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問(wèn)題的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue 綁定使用 touchstart touchmove touchend解析
這篇文章主要介紹了vue 綁定使用 touchstart touchmove touchend解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue中"This dependency was not found"問(wèn)題的解決方法
這篇文章主要介紹了Vue中"This dependency was not found"的問(wèn)題的解決方法,需要的朋友可以參考下2018-06-06
JavaScript的Vue.js庫(kù)入門(mén)學(xué)習(xí)教程
Vue的很多思想借鑒于Angular,但卻比較輕量和自由,這里我們整理了JavaScript的Vue.js庫(kù)入門(mén)學(xué)習(xí)教程,包括其架構(gòu)思想與核心的數(shù)據(jù)綁定方式等,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了Vue分析同步和異步有什么區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-05-05
vue3+ts封裝axios實(shí)例以及解決跨域問(wèn)題
在前端開(kāi)發(fā)中,使用axios進(jìn)行數(shù)據(jù)請(qǐng)求是常見(jiàn)的做法,封裝axios可以統(tǒng)一請(qǐng)求頭處理、方便接口管理、配置多攔截器等,提高代碼的可維護(hù)性和重用性,本文詳細(xì)記錄了axios的封裝過(guò)程,包括安裝、配置跨域處理、接口管理文件的創(chuàng)建等2024-09-09
Vue常見(jiàn)報(bào)錯(cuò)以及解決方案實(shí)例總結(jié)
最近做了一個(gè)比較老的vue項(xiàng)目,啟動(dòng)居然各種報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于Vue常見(jiàn)報(bào)錯(cuò)以及解決方案的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
class 與 style 綁定就是專(zhuān)門(mén)用來(lái)實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù),如果需要?jiǎng)討B(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧2023-10-10
Vue.JS項(xiàng)目中5個(gè)經(jīng)典Vuex插件
在本文中，將向你展示5個(gè)特性，你可以通過(guò) Vuex 插件輕松地添加到下一個(gè)項(xiàng)目中。一起來(lái)學(xué)習(xí)下。2017-11-11