vue使用element實(shí)現(xiàn)上傳圖片和修改圖片功能
前言
開發(fā)后臺(tái)管理項(xiàng)目時(shí),遇到了上傳圖片的模塊,這個(gè)比較簡(jiǎn)單,但是保存后的圖片需要編輯就比較麻煩了,自己記錄一下,也分享一下,多多指教
一、應(yīng)用場(chǎng)景
1.上傳圖片并進(jìn)行放大預(yù)覽
2.圖片上傳代碼
我這里的實(shí)現(xiàn)是直接將圖片上傳到接口,成功后返回圖片路徑,表單提交時(shí),后臺(tái)要路徑拼成的字符串格式,類似str=‘/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg’;下面會(huì)介紹路徑處理方法
<el-upload :action="上傳圖片接口地址" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-success="imgSuccess" :on-error="imgError" :on-remove="imgRemove" > <i class="el-icon-plus"></i> </el-upload>
// 上傳成功 imgSuccess(res, file, fileList) { this.fileList = fileList; //這里我是用一個(gè)fileList數(shù)組存取,當(dāng)保存的時(shí)候進(jìn)行圖片路徑處理 }, // 上傳失敗 imgError(res) { this.$message({ type: "error", message: "附件上傳失敗", }); }, // 刪除圖片 imgRemove(file, fileList) { this.fileList = fileList; }, // 附件上傳圖片預(yù)覽事件,這個(gè)就是將路徑直接放進(jìn)一個(gè)彈窗顯示出來就可以了 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, // 處理圖片路徑 setImgUrl(imgArr) { let arr = []; if (imgArr.length>0) { for (let i = 0; i < imgArr.length; i++) { const element = imgArr[i]; arr.push(element.response.data.url); //這個(gè)地方根據(jù)后臺(tái)返回的數(shù)據(jù)進(jìn)行取值,可以先打印一下 } return arr.join(); } else { return '' } },
二、修改已經(jīng)上傳的圖片,并展示到圖片列表中
1.效果展示(先展示原來的圖片,再上傳新圖片,也可刪除原來的圖片)
2.編輯代碼
1.編輯組件代碼
<el-upload :action="上傳圖片接口地址" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-success="imgSuccess1" :on-error="imgError1" :on-remove="imgRemove1" :file-list="fileList2" > <i class="el-icon-plus"></i> </el-upload>
2.處理獲取到的圖片路徑,并進(jìn)行處理展示到列表
// 表格編輯按鈕 tableBianji(row) { this.changeTanchuang = true; this.changeId = row.id; let form = { id: row.id }; let _this = this; //這是 我自己封裝的方法,不用理會(huì),只看圖片路徑處理即可 this.request("url", "GET", form, function (res) { if (res.code == 1) { _this.changeTanchuangForm = res.data; //將字符串轉(zhuǎn)成數(shù)組 let arr = _this.changeTanchuangForm.up_file.split(","); for (let i = 0; i < arr.length; i++) { //創(chuàng)建對(duì)象,并將路徑進(jìn)行ip地址拼接 let obj = { url: _this.requestUrl + arr[i], }; //放進(jìn)圖片列表 _this.fileList2.push(obj); } } else { _this.$message({ message: res.msg, type: "error", }); } }); },
3.編輯圖片插件的方法
fileList1 用來放插件變化的圖片路徑
// 刪除圖片 imgRemove1(file, fileList) { this.fileList1 = fileList; }, // 上傳成功 imgSuccess1(res, file, fileList) { this.fileList1 = fileList; }, // 上傳失敗 imgError1(res) { this.$message({ type: "error", message: "附件上傳失敗", }); },
4.獲取最后列表存在的圖片(上傳兩張新的圖片后,進(jìn)行打印的this.fileList1)
// 先判斷圖片是否更改 if (this.fileList1.length==0) { //如果為0,則表示沒有對(duì)圖片進(jìn)行編輯,則不用更改任何東西 } else { //圖片進(jìn)行了一些操作,包括刪除、新增; let arr = []; // 判斷是否是新上傳的 this.fileList1.map((item,index)=>{ if (item.response) { //是新上傳的,將路徑放進(jìn)數(shù)組 arr.push(item.response.data.url) } else { //原來存在的,將路徑進(jìn)行截取后放進(jìn)數(shù)組 let str = '/uploads'+item.url.split('/uploads')[1]; arr.push(str) } }) //處理后的路徑字符串 let up_file = arr.join(',') }
總結(jié)
就是使用vue結(jié)合element進(jìn)行圖片上傳和編輯的一個(gè)操作,主要就是對(duì)圖片路徑的處理,這里可能你的有些路徑是和我的不一樣的,這個(gè)是根據(jù)后臺(tái)返回的格式?jīng)Q定的,可以多打印幾次。OVER
到此這篇關(guān)于vue使用element實(shí)現(xiàn)上傳圖片和修改圖片功能的文章就介紹到這了,更多相關(guān)vue element上傳和修改圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue?elementui?實(shí)現(xiàn)圖片上傳后拖拽排序功能示例代碼
- Vue3?+?elementplus實(shí)現(xiàn)表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交功能
- vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能實(shí)戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
- 使用vue和element-ui上傳圖片及視頻文件方式
- Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能(含回顯后繼續(xù)上傳或刪除)
- vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能
相關(guān)文章
vue3?reactive數(shù)據(jù)更新視圖不更新問題解決
這篇文章主要為大家介紹了vue3?reactive數(shù)據(jù)更新視圖不更新問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Vue使用codemirror實(shí)現(xiàn)一個(gè)可插入自定義標(biāo)簽的textarea
這篇文章主要為大家詳細(xì)介紹了Vue如何使用codemirror實(shí)現(xiàn)一個(gè)可插入自定義標(biāo)簽的textarea,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02使用Vue.js創(chuàng)建一個(gè)時(shí)間跟蹤的單頁應(yīng)用
這篇文章主要介紹了使用Vue.js創(chuàng)建一個(gè)時(shí)間跟蹤的單頁應(yīng)用的相關(guān)資料,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Vue封裝一個(gè)Tabbar組件?帶組件路由跳轉(zhuǎn)方式
這篇文章主要介紹了Vue封裝一個(gè)Tabbar組件?帶組件路由跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04