vue使用element實現(xiàn)上傳圖片和修改圖片功能
前言
開發(fā)后臺管理項目時,遇到了上傳圖片的模塊,這個比較簡單,但是保存后的圖片需要編輯就比較麻煩了,自己記錄一下,也分享一下,多多指教
一、應用場景
1.上傳圖片并進行放大預覽

2.圖片上傳代碼
我這里的實現(xiàn)是直接將圖片上傳到接口,成功后返回圖片路徑,表單提交時,后臺要路徑拼成的字符串格式,類似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數(shù)組存取,當保存的時候進行圖片路徑處理
},
// 上傳失敗
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);
//這個地方根據(jù)后臺返回的數(shù)據(jù)進行取值,可以先打印一下
}
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;
//將字符串轉成數(shù)組
let arr = _this.changeTanchuangForm.up_file.split(",");
for (let i = 0; i < arr.length; i++) {
//創(chuàng)建對象,并將路徑進行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) {
//是新上傳的,將路徑放進數(shù)組
arr.push(item.response.data.url)
} else {
//原來存在的,將路徑進行截取后放進數(shù)組
let str = '/uploads'+item.url.split('/uploads')[1];
arr.push(str)
}
})
//處理后的路徑字符串
let up_file = arr.join(',')
}
總結
就是使用vue結合element進行圖片上傳和編輯的一個操作,主要就是對圖片路徑的處理,這里可能你的有些路徑是和我的不一樣的,這個是根據(jù)后臺返回的格式決定的,可以多打印幾次。OVER
到此這篇關于vue使用element實現(xiàn)上傳圖片和修改圖片功能的文章就介紹到這了,更多相關vue element上傳和修改圖片內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue3?reactive數(shù)據(jù)更新視圖不更新問題解決
這篇文章主要為大家介紹了vue3?reactive數(shù)據(jù)更新視圖不更新問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06
Vue使用codemirror實現(xiàn)一個可插入自定義標簽的textarea
這篇文章主要為大家詳細介紹了Vue如何使用codemirror實現(xiàn)一個可插入自定義標簽的textarea,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02

