網(wǎng)站首頁 編程語言 正文
el-upload上傳組件的動(dòng)態(tài)添加；el-upload動(dòng)態(tài)上傳文件；el-upload區(qū)分文件是哪個(gè)組件上傳的。
作者：i_am_a_div_日積月累_ 更新時(shí)間： 2022-07-03 編程語言
需求：正常我們上傳都是一個(gè)固定的文件傳到固定的后端字段里去。
但是有可能遇到，這種自定義新增多個(gè)上傳組件，也就是遍歷數(shù)組似的多個(gè)同樣的上傳組件
此時(shí)就遇到一個(gè)問題：因?yàn)槭潜闅v出來的上傳組件，導(dǎo)致上傳成功:on-success、改變:on-change、刪除:on-remove都是用的同樣的方法，那么怎么知道剛才上傳的這個(gè)文件是屬于哪個(gè)組件的呢
解決方法： 在模板html的時(shí)候，結(jié)合function的函數(shù)，先將遍歷的 j 下標(biāo)return到對(duì)應(yīng)的成功方法里，然后在methods時(shí)候，在return出來的對(duì)應(yīng)的方法里，通過下標(biāo) j 標(biāo)識(shí)將上傳成功的內(nèi)容（圖片名稱、url、id等）存入對(duì)應(yīng)的字段中。
.:on-remove="(file, file_list)=>{handlePayRemove(file, file_list, j)}":on-change="(file, file_list)=>{return filePayChange(file, file_list, j)}":on-success="(response, file, file_list)=>{return msgPaySuccess(response, file, file_list, j)}"
以下代碼可以直接復(fù)制使用，但是需要注意將 uploadImgURL 換成自己的圖片上傳接口
<template>
<div class="order">
<el-form :model="ruleFormContract" ref="ruleFormContract" label-width="130px" class="demo-ruleFormContract">
<el-row>
<el-col :span="24">
<el-form-item label="上傳附件：">
<span style="color: #1890ff; cursor: pointer;" @click="addFileArr">
<i class="el-icon-plus"></i>
添加自命名附件
</span>
</el-form-item>
</el-col>
<!-- 這是固定的上傳 -->
<el-form-item label-width="150px" label="付款申請(qǐng)碼/付款碼：" prop="hetongwenjian" class="img_all_box_item">
<div>
<el-upload class="upload-demo" style="backgroundColor:#fff;width: 360px;"
:action="uploadImgURL"
:file-list="filePayListFukuanma"
ref="msgPayUpload"
:on-preview="handlePictureCardPay"
:before-upload="beforePayUp"
:on-change="(file, file_list)=>{return filePayChange(file, file_list, 'filePayListFukuanma')}"
:on-success="(response, file, file_list)=>{return msgPaySuccess(response, file, file_list, 'filePayListFukuanma')}"
:on-remove="(file, file_list)=>{return handlePayRemove(file, file_list, 'filePayListFukuanma')}"
:show-file-list="false"
drag
:multiple="true"
:limit="2000">
<!-- :show-file-list="false" 取消原自帶的文件展示 展示下方template里自己寫的文件展示 -->
<i class="el-icon-plus"></i>
<div class="el-upload__text">
將文件拖到此處，或<em>點(diǎn)擊上傳(需小于2M)</em>
</div>
</el-upload>
</div>
<template>
<div style="float:left;" v-for="(item,index) in showImageArrFukuanma" :key="index">
<span class="span_box" style="border:1px solid #ccc;display:inline-block;border-radius: 5px;" @click="showBigImg(item)">
<img v-if="(item.fileName.indexOf('.png')>=0)||(item.fileName.indexOf('.jpg')>=0)||(item.fileName.indexOf('.jpeg')>=0)" style="width:50px;height:50px;cursor: pointer;" :src="item.imgUrl" alt="">
<img v-else style="width:50px;height:50px;cursor: pointer;" src="../../../static/file.png" alt="">
<span>{{item.fileName}}</span>
<i class="el-icon-close" style="cursor: pointer;margin-left:5px;" @click.stop.prevent="deleteImgOne(item,'filePayListFukuanma')"></i>
</span>
</div>
</template>
</el-form-item>
<!-- 遍歷多個(gè) -->
<template v-for="(ele,j) in newImgElemenArr">
<el-form-item label-width="150px" :key="j" prop="hetongwenjian" class="img_all_box_item img_all_box_arr">
<el-input style="float:left;width: 150px;" v-model="ele.newname"></el-input>
<i class="el-icon-delete" style="float:left;margin: 10px 10px;" @click="delzdyArr(j)"></i>
<div>
<el-upload class="upload-demo" style="backgroundColor:#fff;width: 360px;"
:action="uploadImgURL"
:file-list="ele.newfilePayListName"
ref="msgPayUpload"
:on-preview="handlePictureCardPay"
:before-upload="beforePayUp"
:on-change="(file, file_list)=>{return filePayChange(file, file_list, j)}"
:on-success="(response, file, file_list)=>{return msgPaySuccess(response, file, file_list, j)}"
:on-remove="(file, file_list)=>{handlePayRemove(file, file_list, j)}"
:show-file-list="false" drag
:multiple="true"
:limit="2000">
<!-- :show-file-list="false" 取消原自帶的文件展示 展示下方template里自己寫的文件展示 -->
<i class="el-icon-plus"></i>
<div class="el-upload__text">
將文件拖到此處，或<em>點(diǎn)擊上傳(需小于2M)</em>
</div>
</el-upload>
</div>
<template>
<div style="float:left;" v-for="(item,index) in ele.newshowImageArr" :key="index">
<span class="span_box" style="border:1px solid #ccc;display:inline-block;border-radius: 5px;" @click="showBigImg(item)">
<img v-if="(item.fileName.indexOf('.png')>=0)||(item.fileName.indexOf('.jpg')>=0)||(item.fileName.indexOf('.jpeg')>=0)" style="width:50px;height:50px;cursor: pointer;" :src="item.imgUrl" alt="">
<img v-else style="width:50px;height:50px;cursor: pointer;" src="../../../static/file.png" alt="">
<span>{{item.fileName}}</span>
<i class="el-icon-close" style="cursor: pointer;margin-left:5px;" @click.stop.prevent="deleteImgOne(item,j)"></i>
</span>
</div>
</template>
</el-form-item>
</template>
</el-row>
</el-form>
<!-- 預(yù)覽圖 -->
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
import { G_CGI_PHP } from "api/api" // 引入后端的api接口地址
export default {
data () {
return {
ruleFormContract: {},
uploadImgURL: G_CGI_PHP.group.documentUpload,//上傳文件后端給的接口-------------------需要替換成你自己的
// uploadImgURL: 'https://jsonplaceholder.typicode.com/posts/',
dialogImageUrl: "",
dialogVisible: false,
filePayListFukuanma: [],
showImageArrFukuanma: [
// {fileName:'aaa.png',fileId:'21909489392392',imgUrl:G_CGI_PHP.group.documentDownload + `?id=` + res.data}
], //上傳圖后存入數(shù)組 前端遍歷和展示的值
newImgElemenArr: [
// { newname: '', newfilePayListName: [], newshowImageArr: [] }//分別是名稱（傳給后端知道哪個(gè)附件名），上傳綁定（估計(jì)用不到），圖片數(shù)組（傳給后端的圖片信息）
],//動(dòng)態(tài)新增加的附件上傳組件
}
},
methods: {
addFileArr () {
let name1 = '附件' + (this.newImgElemenArr.length + 1)
this.newImgElemenArr.push({ newname: name1, newfilePayListName: [], newshowImageArr: [] })
},
delzdyArr (j) {
this.newImgElemenArr = this.newImgElemenArr.filter((ele, index) => {
return index != j
})
},
handlePictureCardPay (file) {
console.log(file, "預(yù)覽")
this.dialogImageUrl = file.url
this.dialogVisible = true
},
beforePayUp (file) {
console.log('上傳前', file)
if ((file.size / 1024 / 1024) >= 2) {
this.$message.warning('文件需小于2M')
return false
}
},
filePayChange (file, fileDataList, j) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
console.log(file, fileDataList, j, "文件改變")
if (j == 'filePayListFukuanma') {
this.filePayListFukuanma = fileDataList
} else {
for (let h = 0; h < this.newImgElemenArr.length; h++) {
const element = this.newImgElemenArr[h]
if (h == j) {
this.newImgElemenArr[h].newfilePayListName = fileDataList
}
}
}
setTimeout(() => {
loading.close()
}, 2000)
},
msgPaySuccess (res, file, file_list, j) {
console.log('上傳成功', res, file)
// console.log("營業(yè)執(zhí)照上傳成功：file格式---", file.raw,)
// console.log('圖片地址', URL.createObjectURL(file.raw))
const _vm = this
if (res.success) {
if (j == 'filePayListFukuanma') {
this.showImageArrFukuanma.push({ fileName: file.name, fileId: res.data, imgUrl: G_CGI_PHP.group.documentDownload + `?id=` + res.data })
} else {
for (let h = 0; h < this.newImgElemenArr.length; h++) {
const element = this.newImgElemenArr[h]
if (h == j) {
this.newImgElemenArr[h].newshowImageArr.push({ fileName: file.name, fileId: res.data, imgUrl: G_CGI_PHP.group.documentDownload + `?id=` + res.data })
}
}
}
} else {
_vm.$message({
message: "上傳失敗,請(qǐng)重新上傳!",
type: "error",
})
}
},
handlePayRemove (file, fileDataList, j) {
console.log(file, fileDataList, j, "刪圖")
if (j == 'filePayListFukuanma') {
this.filePayListFukuanma = fileDataList
} else {
for (let h = 0; h < this.newImgElemenArr.length; h++) {
const element = this.newImgElemenArr[h]
if (h == j) {
this.newImgElemenArr[h].newfilePayListName = fileDataList
}
}
}
},
showBigImg (item) {
if ((item.fileName.indexOf('.png') >= 0) || (item.fileName.indexOf('.jpg') >= 0) || (item.fileName.indexOf('.jpeg') >= 0)) {
// 圖片是預(yù)覽
this.dialogImageUrl = item.imgUrl
this.dialogVisible = true
} else {
// 其他文件是下載
const x = new window.XMLHttpRequest()
x.open('GET', item.imgUrl, true)
x.responseType = 'blob'
x.onload = () => {
const url = window.URL.createObjectURL(x.response)
const a = document.createElement('a')
a.href = url
a.download = item.fileName
a.click()
}
x.send()
}
},
deleteImgOne (item, j) {
console.log(item, j)
if (j == 'filePayListFukuanma') {
this.showImageArrFukuanma = this.showImageArrFukuanma.filter(ele => {
return ele != item
})
this.filePayListFukuanma = this.filePayListFukuanma.filter(ele => {
return ele.name != item.fileName
})
} else {
for (let h = 0; h < this.newImgElemenArr.length; h++) {
const element = this.newImgElemenArr[h]
if (h == j) {
console.log(h, j, item)
this.newImgElemenArr[h].newshowImageArr = this.newImgElemenArr[h].newshowImageArr.filter(ele => {
return ele != item
})
this.newImgElemenArr[h].newfilePayListName = this.newImgElemenArr[h].newfilePayListName.filter(ele => {
return ele.name != item.fileName
})
}
}
}
},
},
}
</script>
<style lang="less" scoped>
.order {
padding: 20px;
/deep/.el-dialog__body {
padding-top: 0px;
padding-bottom: 20px;
}
// 以下是處理彈框
.el-form-item__content {
width: 100% !important;
.el-select {
width: 100%;
}
.el-date-editor {
width: 100%;
}
}
/deep/.bottom_box {
text-align: center;
.el-form-item__content {
margin-left: 0 !important;
}
}
.el-col {
// background-color: #1fff;
// border: 1px solid #ddd;
// min-height: 62.62px;
min-height: 65.62px;
}
.span_box {
padding: 10px;
box-sizing: border-box;
height: 80px;
overflow: hidden;
margin-left: 10px;
img {
float: left;
margin-top: 5px;
}
span {
float: left;
margin-top: 10px;
}
i {
float: left;
margin-top: 24px;
}
}
.bor_box {
margin-left: 50px;
margin-bottom: 10px;
overflow: hidden;
position: relative;
/deep/.el-col-2 {
margin-top: 32px;
}
/deep/.el-col-6 {
top: 25px;
position: relative;
}
.box4_div {
border: 1px solid #ddd;
overflow: hidden;
height: 93px;
padding-right: 50px;
}
.name_span {
position: absolute;
right: -18px;
top: 0px;
}
.el-icon-delete {
margin-left: 20px;
margin-top: 3px;
cursor: pointer;
}
}
.num_input {
width: fit-content;
/deep/.el-input-number__decrease,
/deep/.el-input-number__increase {
display: none !important;
}
/deep/.el-input__inner {
padding: 0 !important;
text-align: left;
padding-left: 10px !important;
}
}
/deep/.pos_box {
position: relative;
span {
position: absolute;
top: 0px;
}
}
.img_all_box_item {
width: 100%;
overflow: hidden;
padding-top: 15px;
/deep/.el-form-item__label {
margin-top: 20px;
}
/deep/.upload-demo {
float: left !important;
// background-color: #1fff !important;
padding: 0 !important;
height: 80px !important;
line-height: 80px !important;
.el-icon-plus {
float: left !important;
margin: 32px 0 0 12px !important;
}
.el-upload-dragger {
height: 80px !important;
}
}
}
.img_all_box_arr {
margin-left: 10px;
/deep/.el-form-item__content {
margin-left: 0 !important;
}
}
}
</style>
原文鏈接：https://blog.csdn.net/i_am_a_div/article/details/125545564
相關(guān)推薦
- 2022-10-15 QT實(shí)現(xiàn)FTP上傳文件_C 語言
- 2022-06-02 深入解析Apache?Hudi內(nèi)核文件標(biāo)記機(jī)制_服務(wù)器其它
- 2022-03-15 C#實(shí)現(xiàn)時(shí)間戳與標(biāo)準(zhǔn)時(shí)間的互轉(zhuǎn)_C#教程
- 2022-11-30 C#?WinForm自動(dòng)更新程序之文件上傳操作詳解_C#教程
- 2022-02-13 自動(dòng)化進(jìn)行Pod的擴(kuò)縮容-HPA
- 2022-07-20 Android?shape與selector標(biāo)簽使用詳解_Android
- 2022-10-23 C/C++指針介紹與使用詳解_C 語言
- 2022-09-23 Kotlin中空判斷處理操作實(shí)例_Android
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運(yùn)行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速