資訊專欄INFORMATION COLUMN
項目要求上傳圖片的模塊，這個簡單，但是要在保存圖片后需要編輯就不怎么好處理了，現在就和大家一起分享。
一、應用場景
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進行圖片上傳和編輯的一個操作，主要就是對圖片路徑的處理，不一樣的路徑，就會造成后臺返回的格式決定的。這個重點要記住。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/128386.html
摘要：正文上傳圖片到七牛云這個需要前后端的配合才能實現，這里是官方的參考鏈接。參考鏈接組件的怎么獲取進度值谷歌找到的其一谷歌找到的其二完 前言 最近在做后臺管理項目，采用的 vue-element-admin ，上傳圖片是一個很常用的功能，也遇到了很多問題，剛好趁此機會做一些總結。 初步總結下會提到的問題，目錄如下： el-upload 自定義上傳方法 圖片上傳到七牛云 圖片壓縮后再上傳（...
摘要：實現多圖上傳主要用到以下兩個屬性是自帶多圖上傳的，但是細心的朋友可能發現默認多圖的實現可能和我們預期有些出入，有截圖可以看出，實質是進行多次請求在上傳事件觸發后，多圖上傳的默認實現調用了三次請求。 前言 工作中碰到需要多圖上傳，在使用element-ui解決過程中碰到一些問題，在這里分享給大家。 環境： Springboot+Vue+Element-ui 正文 這次上傳使用的是Elem...
摘要：我用做狀態管理，七牛云做圖床。關于該組件的其他用法可以在的官方文檔查閱上傳對圖片進行壓縮壓縮圖片的質量對圖片進行壓縮壓縮圖片實現起來比較簡單。前端向后端請求上傳。 我用vuex做狀態管理，七牛云做圖床。 項目地址：多圖片上傳組件 效果展示 showImg(https://segmentfault.com/img/bVbocgG?w=960&h=516); 項目執行流程 首先，讓我們來分...
摘要：其實這個應用并不是那么的特別需求，一來本人寫越來越少，二來開發工作也是越做越少，再者目前的編輯器幾乎都支持直接剪切板上傳圖片，使圖床應用的場景越來越少。 其實這個應用并不是那么的特別需求，一來本人寫blog越來越少，二來開發工作也是越做越少，再者目前的編輯器幾乎都支持直接剪切板上傳圖片，使圖床應用的場景越來越少。不過本人本著不想丟棄技術的內心想法，以及鍛煉自己寫一個完整項目，還是開啟了...
閱讀 561·2023-03-27 18:33
閱讀 750·2023-03-26 17:27
閱讀 647·2023-03-26 17:14
閱讀 603·2023-03-17 21:13
閱讀 537·2023-03-17 08:28
閱讀 1823·2023-02-27 22:32
閱讀 1315·2023-02-27 22:27
閱讀 2199·2023-01-20 08:28
