vue+element-plus上傳圖片及回顯問題及數(shù)量限制
此篇可以完整幫助你解決編輯回顯問題以及數(shù)量問題
常用的屬性介紹：
首先hide_box: upload_btn是和css中的樣式息息相關(guān)的 如果此值為true則隱藏上傳圖片功能，但是不影響已經(jīng)上傳過的圖片，所以我們可以在一些獨特的條件下讓他改變值，比如：上傳數(shù)量為3 limit 為上傳圖片的數(shù)量 這時我們上傳了兩個照片他的圖片上傳功能是不會顯示的，如果在上傳一個他就會消失
- on-success為上傳成功之后的操作可以配合limit 和hide_box: upload_btn 使用
- action為請求的接口
- name為接口所需的參數(shù)
- before-remove為刪除事件，這個刪除事件需要加一些對fileList數(shù)組進(jìn)行清空或刪除的操作，因為他只是刪除表面的圖片
- on-change為選擇好照片之后的事件
- file-list可以用來獲取它的圖片路徑通常用在添加或者編輯回顯的時候使用，當(dāng)然也可以做一些更廣泛的使用，這里不再一一介紹 說到回顯這里有一個問題，我們在做項目的時候都會遇到這么一個問題點擊編輯回顯了但是照片無法正常顯示，這是我們可以這么一搞就ok了
fileList.value.push({url:照片的路徑})
但是有時候還會遇到一個問題，在照片沒有改的情況下點擊確認(rèn)編輯了，然后照片就變成無法加載了，原因如下：
1.接口只需要一個簡簡單單的路徑而已，因為剛才編輯回顯我們在fileList數(shù)組里面加了一個對象和url，這是絕大多數(shù)會把整個數(shù)組放進(jìn)去，所以可想而知不是后端想要的數(shù)據(jù)會報錯，如果后端沒有做攔截，那么返回的參數(shù)也不是上傳圖片功能所需數(shù)據(jù)格式，他要的是帶有https的路徑，所以無法加載，可以這樣解決：添加圖片的時候也加一個url，這時添加和編輯的時候數(shù)據(jù)都一樣了，唯有路徑可以發(fā)生變化，這個時候添加和確認(rèn)編輯的時候直接fileList[0].url就ok了。問題解決。
2.我們可以聲明兩個數(shù)組，一個數(shù)組只放路徑，編輯回顯的時候在一個是數(shù)組里面push純路徑，上傳編輯都用它，另一個就放對象url：路徑只用于回顯數(shù)據(jù)我們添加和刪除的時候都對這個純路徑的數(shù)組進(jìn)行操作就ok了，問題解決。
1.引入：
import { ElMessageBox } from "element-plus";
2.html：
<p class="commodity_img">
<!-- 上傳圖片 -->
<el-upload
:class="{ hide_box: upload_btn }"
:on-success="handleSuccess"
list-type="picture-card"
:action="'/pcapi/File/fileimg'"
:on-change="handleChanges"
:before-remove="beforeRemove"
:on-preview="handlePictureCardPreview"
:file-list="fileList "
multiple
limit="1"
name="img"
>
<el-icon class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</p>3.css：
<style scoped>
.hide_box /deep/ .el-upload--picture-card {
display: none;
}
</style>
4.js：
const upload_btn = ref(false);
const fileList = ref([]);
const handleSuccess = () => {
// 上傳成功后，隱藏上傳按鈕
upload_btn.value = true;
};
const handleChanges = img => {
if (img.status == "success") {
fileList.value = img.response.front_file;
}
};
// 刪除
const beforeRemove = () => {
const result = new Promise((resolve, reject) => {
ElMessageBox.confirm("此操作將刪除該圖片, 是否繼續(xù)?", "提示", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
resolve();
fileList.value = [];
upload_btn.value = false;
})
.catch(() => {
reject(false);
});
});
return result;
};到此這篇關(guān)于vue+element-plus上傳圖片及回顯問題及數(shù)量限制的文章就介紹到這了,更多相關(guān)vue+element-plus上傳圖片及回顯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
使用Vue.js和Element-UI做一個簡單登錄頁面的實例
React組件通信之路由傳參(react-router-dom)
關(guān)于ElementUI自定義Table支持render
