vue使用element實現上傳圖片和修改圖片功能
前言
開發後臺管理項目時,遇到瞭上傳圖片的模塊,這個比較簡單,但是保存後的圖片需要編輯就比較麻煩瞭,自己記錄一下,也分享一下,多多指教
一、應用場景
1.上傳圖片並進行放大預覽
2.圖片上傳代碼
我這裡的實現是直接將圖片上傳到接口,成功後返回圖片路徑,表單提交時,後臺要路徑拼成的字符串格式,類似str=‘/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg’;下面會介紹路徑處理方法
<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; //這裡我是用一個fileList數組存取,當保存的時候進行圖片路徑處理 }, // 上傳失敗 imgError(res) { this.$message({ type: "error", message: "附件上傳失敗", }); }, // 刪除圖片 imgRemove(file, fileList) { this.fileList = fileList; }, // 附件上傳圖片預覽事件,這個就是將路徑直接放進一個彈窗顯示出來就可以瞭 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); //這個地方根據後臺返回的數據進行取值,可以先打印一下 } return arr.join(); } else { return '' } },
二、修改已經上傳的圖片,並展示到圖片列表中
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.處理獲取到的圖片路徑,並進行處理展示到列表
// 表格編輯按鈕 tableBianji(row) { this.changeTanchuang = true; this.changeId = row.id; let form = { id: row.id }; let _this = this; //這是 我自己封裝的方法,不用理會,隻看圖片路徑處理即可 this.request("url", "GET", form, function (res) { if (res.code == 1) { _this.changeTanchuangForm = res.data; //將字符串轉成數組 let arr = _this.changeTanchuangForm.up_file.split(","); for (let i = 0; i < arr.length; i++) { //創建對象,並將路徑進行ip地址拼接 let obj = { url: _this.requestUrl + arr[i], }; //放進圖片列表 _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.獲取最後列表存在的圖片(上傳兩張新的圖片後,進行打印的this.fileList1)
// 先判斷圖片是否更改 if (this.fileList1.length==0) { //如果為0,則表示沒有對圖片進行編輯,則不用更改任何東西 } else { //圖片進行瞭一些操作,包括刪除、新增; let arr = []; // 判斷是否是新上傳的 this.fileList1.map((item,index)=>{ if (item.response) { //是新上傳的,將路徑放進數組 arr.push(item.response.data.url) } else { //原來存在的,將路徑進行截取後放進數組 let str = '/uploads'+item.url.split('/uploads')[1]; arr.push(str) } }) //處理後的路徑字符串 let up_file = arr.join(',') }
總結
就是使用vue結合element進行圖片上傳和編輯的一個操作,主要就是對圖片路徑的處理,這裡可能你的有些路徑是和我的不一樣的,這個是根據後臺返回的格式決定的,可以多打印幾次。OVER
到此這篇關於vue使用element實現上傳圖片和修改圖片功能的文章就介紹到這瞭,更多相關vue element上傳和修改圖片內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 解決el-upload批量上傳隻執行一次成功回調on-success的問題
- vue使用Element el-upload 組件踩坑記
- element el-upload文件上傳覆蓋第一個文件的實現
- vue封裝組件之上傳圖片組件
- element upload 鉤子函數的坑及解決