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