vue+elementUI實(shí)現(xiàn)圖片上傳功能
本文實(shí)例為大家分享了vue+elementUI圖片上傳的具體代碼,供大家參考,具體內(nèi)容如下
1、html
<el-form-item label="圖片" prop="logo"> <el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="picture-card" :file-list="fileLists" :on-preview="handlePictureCardPreview" :on-success="success" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload> <!--大圖彈出框--> <el-dialog :visible.sync="imgDialogVisible" size="full" :modal="false" title="查看大圖片"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item>
2、定義
dialogImageUrl: '', imgDialogVisible: false, fileLists: [],
3、在需要使用的方法中給fileLists[]賦值
vm.fileLists = []; if (row.logo != undefined && row.logo != "") { vm.fileLists.push({url:row.logo}); }
4、其他幾個(gè)屬性的方法
//刪除圖片 handleRemove(file, fileList) { this.form.logo='' }, //查看大圖 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.imgDialogVisible = true; }, //圖片上傳成功 success(response, file, fileList) { this.fileLists = []; this.fileLists = [file] this.form.logo = file.response.result; },
5、圖片上傳的位置和路徑是存在不同的表中。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能實(shí)戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
- vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解
- vue+elementUI(el-upload)圖片壓縮,默認(rèn)同比例壓縮操作
- Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能(含回顯后繼續(xù)上傳或刪除)
- Vue?+?ElementUI表格內(nèi)實(shí)現(xiàn)圖片點(diǎn)擊放大效果的兩種實(shí)現(xiàn)方式
相關(guān)文章
vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例
圖形驗(yàn)證碼是做網(wǎng)站常用的功能,本文主要介紹了vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11Vue退出登錄時(shí)清空緩存的實(shí)現(xiàn)
今天小編就為大家分享一篇Vue退出登錄時(shí)清空緩存的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue2.x中的父組件傳遞數(shù)據(jù)至子組件的方法
這篇文章主要介紹了Vue2.x中的父組件數(shù)據(jù)傳遞至子組件的方法,需要的朋友可以參考下2017-05-05解決Vue數(shù)據(jù)更新了但頁(yè)面沒有更新的問題
在vue項(xiàng)目中,有些我們會(huì)遇到修改完數(shù)據(jù),但是視圖卻沒有更新的情況,具體的場(chǎng)景不一樣,解決問題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下2023-08-08vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼
本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例
本文主要介紹了vue關(guān)閉瀏覽器退出登錄,一般都是根據(jù)根據(jù)beforeunload和unload這兩個(gè)事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2021-12-12