vue中使用elementUI組件手動上傳圖片功能
更新時間：2019年12月13日 10:12:34 作者：NovemberChopin
Vue是一套構(gòu)建用戶界面的框架， 開發(fā)只需要關(guān)注視圖層， 它不僅易于上手，還便于與第三方庫或既有項目的整合。這篇文章主要介紹了vue中使用elementUI組件手動上傳圖片,需要的朋友可以參考下
Vue框架簡介
Vue是一套構(gòu)建用戶界面的框架， 開發(fā)只需要關(guān)注視圖層， 它不僅易于上手，還便于與第三方庫或既有項目的整合。是基于MVVM（Model-View-ViewModel）設(shè)計思想。提供MVVM數(shù)據(jù)雙向綁定的庫，專注于UI層面
使用elementUI上傳圖片時遇到跨域問題，所以需要自己寫一個手動上傳圖片的方法
代碼：
html
<el-upload
class="upload-demo"
ref="upload"http://綁定ref 清空時會用到
:limit="1" //最多可上傳1張
:http-request="ImgUploadSectionFile" //上傳方法
:with-credentials="true"
:auto-upload="true"
accept=".png,.jpg,.gif,.svg"http://上傳文件的后綴名
action=""http://文件上傳地址 我用的手動上傳所以為空
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)
}
});
}
我做的是 后臺返回上傳的圖片字符串地址 然后我加到對象中點擊總按鈕時再發(fā)送到后臺 所以添加結(jié)束之后需要加下面這行代碼
this.$refs.upload.clearFiles();//清空
總結(jié)
以上所述是小編給大家介紹的vue中使用elementUI組件手動上傳圖片功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
element ui中表單el-form的label如何設(shè)置寬度
這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
element-ui動態(tài)級聯(lián)選擇器回顯問題詳解(二十多行代碼搞定）
大家在使用element-ui的時候肯定會遇到這樣一個問題,就是在你使用級聯(lián)選擇器的回顯問題,下面這篇文章主要給大家介紹了關(guān)于element-ui動態(tài)級聯(lián)選擇器回顯問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue 綁定使用 touchstart touchmove touchend解析
這篇文章主要介紹了vue 綁定使用 touchstart touchmove touchend解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue中"This dependency was not found"問題的解決方法
這篇文章主要介紹了Vue中"This dependency was not found"的問題的解決方法,需要的朋友可以參考下2018-06-06
JavaScript的Vue.js庫入門學(xué)習(xí)教程
Vue的很多思想借鑒于Angular,但卻比較輕量和自由,這里我們整理了JavaScript的Vue.js庫入門學(xué)習(xí)教程,包括其架構(gòu)思想與核心的數(shù)據(jù)綁定方式等,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了Vue分析同步和異步有什么區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-05-05
在前端開發(fā)中,使用axios進(jìn)行數(shù)據(jù)請求是常見的做法,封裝axios可以統(tǒng)一請求頭處理、方便接口管理、配置多攔截器等,提高代碼的可維護(hù)性和重用性,本文詳細(xì)記錄了axios的封裝過程,包括安裝、配置跨域處理、接口管理文件的創(chuàng)建等2024-09-09
最近做了一個比較老的vue項目,啟動居然各種報錯,下面這篇文章主要給大家介紹了關(guān)于Vue常見報錯以及解決方案的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
class 與 style 綁定就是專門用來實現(xiàn)動態(tài)樣式效果的技術(shù),如果需要動態(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧2023-10-10
在本文中，將向你展示5個特性，你可以通過 Vuex 插件輕松地添加到下一個項目中。一起來學(xué)習(xí)下。2017-11-11