vue element-ui v-for循環(huán)el-upload上傳圖片 動(dòng)態(tài)添加、刪除方式
更新時(shí)間：2023年10月16日 15:02:18 作者：杰瑞LJ
這篇文章主要介紹了vue element-ui v-for循環(huán)el-upload上傳圖片 動(dòng)態(tài)添加、刪除方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
element-ui v-for循環(huán)el-upload上傳圖片 動(dòng)態(tài)添加、刪除
表單元素
<el-row v-for="(v,i) in RecordOperation.imgList" :key="i">
<el-col :span='11'>
<el-form-item label="圖片">
<el-upload
accept="image/jpeg,image/png"
class="avatar-uploader"
:action="uploadUrl()"
:show-file-list="false"
:on-success="dynamicPicSuccess.bind(null, {'index':i,'data':v})"
:before-upload="beforeUploadImageDynamicPic">
<img v-if="v.picUrl" :src="v.picUrl" class="avatar dynamic">
<i v-else class="el-icon-plus avatar-uploader-icon dynamic"></i>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="圖片介紹">
<el-input minlength="4" maxlength="20" v-model.trim="v.content"></el-input>
</el-form-item>
</el-col>
<el-col :span="2" align="right" v-show="RecordOperation.imgList.length<=2?false:true">
<el-button type="text" style="color:red;line-height:32px;" @click="delDynamicPic(i,RecordOperation.imgList)">刪除</el-button>
</el-col>
</el-row>
圖片上傳驗(yàn)證，上傳圖片處理，刪除圖片
// 動(dòng)態(tài)圖片驗(yàn)證
beforeUploadImageDynamicPic(file){
var _this = this;
var isLt10M = file.size / 1024 / 1024 < 10;
if (['image/jpeg', 'image/png'].indexOf(file.type) == -1) {
_this.$message.error('請(qǐng)上傳正確的圖片格式');
return false;
}
if (!isLt10M) {
_this.$message.error('上傳圖片大小不能超過(guò)10MB哦!');
return false;
}
},
//動(dòng)態(tài)圖上傳成功
dynamicPicSuccess(obj,res,file) {
var imgList = this.RecordOperation.imgList
var index = obj.index;
imgList[index].picUrl = res.data.filePath;
// 少于5張圖時(shí)，自動(dòng)添加一行
if(imgList.length<5)
imgList.push({content: '', picUrl: ""});
},
// 移除動(dòng)態(tài)建設(shè)圖片
delDynamicPic(i,list) {
this.$confirm('確認(rèn)刪除該條記錄？', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
list.splice(i, 1);
});
},
vue+Element-ui(el-upload) 上傳圖片/文件
文件上傳時(shí)攜帶參數(shù)
文件上傳時(shí),想要在上傳的時(shí)候攜帶參數(shù)，可直接使用：
:data={參數(shù)} ,參數(shù)為鍵值對(duì)的形式{key1:value1,key2:value2}
<el-upload
:data={pid:this.pid}
>
</el-upload>upload
open: 是否顯示彈出層，該屬性的值為布爾型，false表示不顯示，true表示顯示。title: 彈出層標(biāo)題，該屬性的值為字符串類(lèi)型。updateSupport: 是否更新已經(jīng)存在的用戶數(shù)據(jù)，該屬性的值為整型。若為0，則不更新；若為1，則更新。headers: 設(shè)置上傳的請(qǐng)求頭部，該屬性的值為一個(gè)對(duì)象類(lèi)型，包含了一個(gè)Authorization屬性，在請(qǐng)求頭部中將會(huì)添加Authorization屬性的值為"Bearer "加上getToken()方法的返回值，此處的返回值就是token（根據(jù)自己需求改?。?/li>url: 上傳的地址，該屬性的值為一個(gè)字符串類(lèi)型，值process.env.VUE_APP_BASE_API + "/api/common/upload"。- 其中，process.env.VUE_APP_BASE_API是一個(gè)環(huán)境變量，其值在不同的環(huán)境中可能會(huì)有所不同，表示應(yīng)用程序的基本API地址。
<el-upload
:headers="upload.headers"
:action="upload.url"
:on-success="handleFileSuccess"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="completionPhotoList"
:on-change="changeFile"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :modal="false">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<script>
export default {
data() {
return {
// 用戶導(dǎo)入?yún)?shù)
upload: {
// 是否顯示彈出層（用戶導(dǎo)入）
open: false,
// 彈出層標(biāo)題（用戶導(dǎo)入）
title: "",
// 是否更新已經(jīng)存在的用戶數(shù)據(jù)
updateSupport: 0,
// 設(shè)置上傳的請(qǐng)求頭部
headers: { Authorization: "Bearer " + getToken() },
// 上傳的地址
url: process.env.VUE_APP_BASE_API + "/api/common/upload",
},
}
}before-remove來(lái)阻止文件被刪除的操作
<el-upload
:before-remove="beforeRemove"
>
</el-upload>
<script>
export default {
data() {
return {
};
},
methods: {
beforeRemove(file, fileList) {
return this.$confirm(`確定移除 ${ file.name }？`);
},
}
}
</script>multiple、limit、on-exceed屬性
給控件加了multiple屬性，就表示可以多選；
通過(guò)limit設(shè)置多選的個(gè)數(shù)限制，當(dāng)不需要多選（只想單選文件）時(shí)，不加multiple屬性；
可多選，無(wú)個(gè)數(shù)限制，不設(shè)置limit這個(gè)屬性即可；
on-exceed：超出限制時(shí)會(huì)調(diào)用此方法；
超出三個(gè)文件給予提示信息，如圖：
<el-upload
multiple
:limit="3"
:on-exceed="handleExceed"
>
</el-upload>
<script>
export default {
data() {
return {
};
},
methods: {
handleExceed(files, fileList) {
this.$message.warning(`當(dāng)前限制選擇 3 個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`);
},
}
}
</script>before-upload屬性以及on-success屬性
注意auto-upload屬性的坑：:auto-upload="false"時(shí)，before-upload 不起作用；
為啥？
before-upload: 文件上傳之前觸發(fā)，指當(dāng)文件已經(jīng)被選中，提交時(shí)才會(huì)觸發(fā)此事件auto-upload：設(shè)置為false時(shí)，選中文件不會(huì)觸發(fā)上傳事件
解決方法：
將before-upload里面要寫(xiě)的內(nèi)容放到on-change事件中去實(shí)現(xiàn)
:auto-upload="false"設(shè)置為true
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上傳頭像圖片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上傳頭像圖片大小不能超過(guò) 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue解析Json數(shù)據(jù)獲取Json里面的多個(gè)id問(wèn)題
這篇文章主要介紹了vue解析Json數(shù)據(jù)獲取Json里面的多個(gè)id問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁(yè)面橫向滑動(dòng)效果
這篇文章主要介紹了如何基于Vue實(shí)現(xiàn)鼠標(biāo)滾動(dòng)輪控制頁(yè)面橫向滑動(dòng)效果,文中通過(guò)代碼示例和圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue修飾符v-model及.sync原理及區(qū)別詳解
這篇文章主要為大家介紹了vue修飾符v-model及.sync原理及使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue3 新增的 Composition API中的 watchEffect 和 watch都可在 setup() 函數(shù)中使用，本文重點(diǎn)介紹vue3中watch與watchEffect的區(qū)別，感興趣的朋友一起看看吧2023-02-02
VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決
這篇文章主要介紹了VueCli生產(chǎn)環(huán)境打包部署跨域失敗的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了VUE3+TS獲取組件類(lèi)型的方法踩坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3使用hooks函數(shù)實(shí)現(xiàn)代碼復(fù)用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實(shí)現(xiàn)代碼復(fù)用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復(fù)用性,?讓我們能在不同的組件中都利用hooks函數(shù)2022-06-06
vue3+ts+EsLint+Prettier規(guī)范代碼的方法實(shí)現(xiàn)
本文主要介紹在Vue3中使用TypeScript做開(kāi)發(fā)時(shí)，如何安裝與配置EsLint和Prettier，以提高編碼規(guī)范。感興趣的可以了解一下2021-10-10
這篇文章主要介紹了Vue使用Swiper的案例詳解，主要包括引入swiper,創(chuàng)建輪播圖組件CarouselContainer.vue的詳細(xì)代碼，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-06-06